css - 如何自动设置 TD 宽度全部相等宽度

Question

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

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

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

请帮忙。

标签： css

Answer 1

下面的例子怎么样。它使用一些 JS 来自动化这个过程。它还使用 CSScalc()并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>