Setting a Html table 'tr' width to have a different width for each cell on one row

user_6174386 0
Viewed 82

I have the following table declaration:

<table width="80%" style="border: 1px solid black; border-collapse: collapse; table-layout: fixed;">
<tbody>
<tr>
<td style="border: 1px solid black; border-collapse: collapse;" width="80%" colspan="2" >This is a very long first line here, taking the entire width of the table</td>
</tr>
<tr>
<td style="border: 1px solid black;" width="10%">Comment</td>
<td style="border: 1px solid black;" width="80%">My text on the comment cell</td>
</tr>
</tbody>
</table>

I don't understand why my second column is as wide as the first one. I thought that by specifying the table-layout: fixed; property for the table, and setting the columns widths, I would obtain what I wanted, which was:

  • A first row with only one cell of a width which would be 100% of the table width
  • A second row with a small first cell, and a second wide second cell
html-table html
2 Answers

In the fixed table layout, when the first row of the table can't describe the individual column widths, you need to use the col element to define those widths. So:

table {
  width: 80%;
  border-collapse: collapse; 
  table-layout: fixed;
}
col:nth-child(1) {
  width: 20%;
}
col:nth-child(2) {
  width: 80%;
}
td {
  border: 1px solid black;
}

  
  <table>
    <col><col>
    <tbody>
      <tr>
        <td colspan="2">This is a very long first line here, taking the entire width of the table</td>
      </tr>
      <tr>
        <td>Comment</td>
        <td>My text on the comment cell</td>
      </tr>
    </tbody>
  </table>

Alohci_425850

table-layout: fixed allows you to set the widths of each <th> or the first row of <td> within the <tbody> if there's no <thead>. Once the widths are established, each column will conform to those widths. It's the nature of a column. If you want different widths for each row try colspan.

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

table,
th,
td {
  border: 3px solid black;
}

th {
  width: 25%
}
<table>
  <thead>
    <tr>
      <th>I</th>
      <th>II</th>
      <th>III</th>
      <th>IV</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan='4'>colspan="4"</td>
    </tr>
    <tr>
      <td></td>
      <td colspan='3'>colspan="3"</td>
    </tr>
    <tr>
      <td colspan='2'>colspan="2"</td>
      <td colspan='2'>colspan="2"</td>
    </tr>
  </tbody>
</table>

user_28132240
Related