Set td width by td number in a table

Question

Is there a way to set td width by number of td in a table. e.g:

if there is 1 td, then the width of each td is 100%
if there is 2 td, then the width of each td is 50%
if there is 3 td, then the width of each td is 1/3
etc.

Is there a way to write a CSS rule for this need?

Side note: I can not edit the HTML, it comes from somwhere else. I can only edit CSS.

The HTML could look like this:

<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>baz<td>
  </tr>
</table>

https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has — Tim Gerhard, Mar 26 '18 at 12:16
That HTML would be invalid. It lacks a closing `` for the 3rd cell, and the `` is also never closed. — connexo, Mar 26 '18 at 12:20

Bhuwan · Accepted Answer · 2018-03-26T12:28:55.323

You can use table-layout:fixed with width:100% to the table.

table-layout: fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells

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

td {
  border: 1px solid;
}

<table>
  <tr>
    <td>foo</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>baztd</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo</td>
    <td>bar</td>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

Set td width by td number in a table

1 Answers1