user1513171 user1513171 - 1 month ago 5
CSS Question

HTML/CSS table-layout fixed but want one td to be a smaller width

I have a table with 4 columns. I want the first one to be a fixed 5% and the next 3 to be a fixed 20%. So in order to make sure the last 3 are always the same width I am using

table-layout:fixed
. However, this is causing the first td to be the same width as the last 3 columns.

Here's my HTML:

<tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{CO}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>


And my CSS:

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;}
.creatorOptionsTable tr {border-bottom: 1px solid black;}
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word}
.creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important; text-align: center; border-left: none;}


Note, I'm aware that I haven't included the
<table>
tag in this. But it is there.

Seems like this should be easy, but won't work.




Well here is my entire code:

<table id="creatorOptionsAddTable" class="creatorOptionsTable">
<tr class="firstRow">
<th clas="groupsOptionsCheckboxCell"></th>
<th>Component</th>
<th>Description</th>
<th>Panel</th>
</tr>
<tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{COMPONET_DESCRIPTION}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>
</table>

Answer

First, you are misunderstanding what this means:

.creatorOptionsTable { width: 80%; }

This sets the table element to 80% of the parent element. So if your parent is 1000px -- this would be telling the browser, "make this table 800px". THEN, it orders the width of the columns.

Second, if you are going to set the width of each column, it must equal 100%. The browser can't account for all columns totalling less the 100%. It would be like saying: there are 8 slices of pizza: Joe ate 1, John ate 2, Sam ate 2, Steve ate 2 -- we ate the whole pizza -- FALSE.

Understanding that, if you want one column to be 1/4th of the other three columns. Should be about 8%, and 30%, 31%, 31% (or just do 10, 30, 30, 30). Or you can just set the width of the 3 the same, and the narrow will fill the remaining space.

Comments