如何自动将TD宽度设置为全部相等的宽度

Question

如何自动将TD宽度设置为全部相等的宽度？没有设置类名。 TD可以是3或4或其他

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

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

请帮助。

Answer 1

下面的示例如何。它使用一些JS来自动化该过程。它还使用CSS calc()和var()来让CSS进行数学运算。

const tables = document.getElementsByTagName('table');

for( let table of tables )
{
  let row = table.getElementsByTagName('tr')[0];
  let columns = row.getElementsByTagName('td').length;
  
  table.style.setProperty('--columns', columns);
}

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

table td {
  width: calc(100% / var(--columns));
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Answer 2

也许flexbox是一种方法。

这是我经常使用的出色参考： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

table{ width: 100%;   border: 1px solid #00aa00; }
  
table tr { 
  display: flex; 
  flex-flow: row wrap;
  justify-content: space-around;
}
td { 
  fleX: 0 1 auto; 
  border: 1px solid #aaa;
}

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
</table>