My table is 500px wide. Is it possible for that table to have only one column 100px wide?

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 600px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
}

<table>
   <tr>
      <th>header 1</th>
   </tr>
   <tr>
      <td>row 1</td>
   </tr>
</table>

My table is 500px wide. Is it possible for that table to have only one column 100px wide?

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 600px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
}

<table>
   <tr>
      <th>header 1</th>
   </tr>
   <tr>
      <td>row 1</td>
   </tr>
</table>

In example above this single column has full with of the table.

• html
• css

• 1 No, I don't think that is possible. I suppose you'd have to include a second cell into the second row, that can take the "excess" width (and then make the cell in the first row, span two columns), to achieve such an effect. Question is - what for? Tables should not be misused as layouting tools, if that's your intention here. – C3roe Commented 12 hours ago
• What's the reason? why not making the table 100px width in this case? give us more context on what you are trying to achieve – Temani Afif Commented 12 hours ago
• At the end I want to create a Editable Table Component. With possibility to add columns and rows. Initial state would be the table has 1 'regular' column and one 'action' column sticked to the right. Action column contains buttons e.g. 'add column' which obviously adds regular column. In this case I think visually it looks better for table to have fixed width. – wolnio Commented 12 hours ago

1 Answer 1

One solution would be adding a filler column with visibility: hidden to take the rest of the space. Then adjust the width as needed using :last-child to apply the width to the last element only. You can check how it looks in the snippet below.

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 600px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
}

th:last-child, td:last-child {
   width: 400px; /* Filler column takes up the rest */
   visibility: hidden; /* Hides the extra column */
}

<table>
   <tr>
      <th>header 1</th>
      <th></th>
   </tr>
   <tr>
      <td>row 1</td>
      <td></td>
   </tr>
</table>