My table has 4 columns, with the first one fixed at 5% and the next 3 at a fixed 20%. To ensure the last 3 are always the same width, I am using table-layout:fixed. However, this is causing the first td to match the width of the last 3 columns.
Here is the HTML snippet:
<tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{CO}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>
And here is my CSS style:
.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: Although not shown, the <table> tag is present in the code.
This should be a simple fix, but it's not working as expected.
Below is the complete code snippet:
<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>