Define Columns Width For Table
Ernst
Hi,
I have a table without header row and with three columns. Unfortunately i can't figure out how to set the width of the first column.
Using
table td {
padding: 0;
}in the custom CSSS of the table I could at least make the other columns fit together nicely without unnecessary spaces.
The screenshot shows that the first column is unnecessarily wide:
It should only take the space that is needed for the text, so that the colonns (:) are displayed immediately afterwards.
It should look like this:
Thanks for any help. Ernst
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Could you please give me your site URL?
-Regards.
Ernst
Accepted AnswerSee in hidden content. The table can be found in the section "Kontakt" at the very botteom. Rgrds
Mehtaz Afsana Borsha
Accepted AnswerYou can set the width from here
.sppb-form-group.sppb-form-builder-field-0 {
width: 800px;
}Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
-Regards.
Ernst
Accepted AnswerDear Mehtaz,
it seems that my question was not clear enough, so I will try to make it a bit clearer.
It's about the column width in a table, which I inserted in SP Page Builder using the table add-on in a column add-on. Unfortunately, the first column does not adapt to the text. And the other columns (unfortunately) need the custom CSS I showed in my request to nicely adapt theier width to the contained text.
In your custom CSS you refer to the form builder add-on, which my difficulty has nothing to do with. Looking at the generated source code for the table in my page, I would rather expect CSS for the sppb-addon-table.
Here another screenshot that should help you find the table on my website:
The red arrow points to the table in question which is located at the bottom of the page in the "Kontakt" section.
When I create a table in pure HTML, the column widths adapt by default to the text they contain. The HTML looks like this:
<tr>
<td>Telefon</td><td>:</td><td>044 123 45 67</td>
</tr>
<tr>
<td>Telefax</td><td>:</td><td>044 123 45 68</td>
</tr>The result gets rendered in the browser like this (which is what I want):
So I suspect that the SPPB is overriding formatting for tables. And it's quite possible that I just haven't found the right parameter in the settings for the table add-on. That's why I made my support request with the hope that someone from your support team can show me the necessary setting (probably even without custom CSS).
To add: the table add-on has a lot of settings, so I guess that my problem can be solved via one of them.
Regards, Ernst
Ernst
Accepted AnswerHi Mehtaz,
I figured it out by myself. With the following custom CSS for the table you can define the columns as needed:
table tr td {
padding: 5px 5px;
}
table tr td {
background-color: white !important;
color: #595959 !important;
}
table {
width: auto !important;
}It's just not very user friendly. Without CSS knowledge one is lost with the table add-on :-(
Regards, Ernst