如何使多个html表具有相同的列宽

Question

我有多个html表.每个表具有相同的列数,但每个单元中具有不同的数据集.

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

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

我想弄清楚在这些表中使用每个可比较列的最简单方法(因此每个第一列,每个第二列等)的宽度相同,因此所有表都完美排列.

由于某些特定原因,我无法将这些合并到一个表中,所以我想看看是否有多个表.

看起来这些表(无论我放入什么CSS)都会根据单元格中的数据进行更改.

有什么建议？

Answer 1

最简单的方法是使用:nth-child选择器：

table td:nth-child(1) { width: 100px; }
table td:nth-child(2) { width: 300px; }
table td:nth-child(3) { width: 225px; }

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

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

或者，您可以为每个类提供td自己的类，但这并不理想，因为您需要手动跟踪这些类，这在动态修改的表中可能会很痛苦：

.column-1 { width: 100px; }
.column-2 { width: 300px; }
.column-3 { width: 225px; }

<table>
  <tr>
    <td class="column-1">Col 1 Table 1</td>
    <td class="column-2">Col 2 Table 1</td>
    <td class="column-3">Col 3 Table 1</td>
  </tr>
</table>

<table>
  <tr>
    <td class="column-1">Col 1 Table 2</td>
    <td class="column-2">Col 2 Table 2</td>
    <td class="column-3">Col 3 Table 2</td>
  </tr>
</table>