如何使多个 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>

Answer 2

如何使用 css 样式？您应该为每个表格的第一行中的单元格设置固定宽度。

<table>
  <tr>
    <td style="width:100px"></td>
    <td style="width:120px"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

编辑：使用 css 类当然更好，但是一旦你看到它是否适合你，你就可以改变它。

<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>
<!-- ... -->
<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

等等。

Answer 3

对<td> 元素应用固定宽度应该可以。如果它不适合您，则可能有一种样式覆盖了您指定的样式，或者您的 CSS 中有语法错误。您是否忘记了单位（例如 px、em）？使用 Firebug（或类似工具）来确定正在应用/覆盖哪些样式。一般来说，类似的东西应该可以工作：

td {
    width: 200px;
}

我不知道这对您的代码库是否可行，但另一种选择是指定一个包含多个 <tbody> 元素的表。像这样：

<table>

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

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

 </table>

出现在 2 个表格之间的任何标记也需要成为更大表格的一部分。如果需要，您可以将该内容放在仅包含一行和一个单元格的第三个 <tbody> 元素中。同样，我不确定您的代码库是否适合这种重构，但我将其作为一种选择。

Answer 4

我确信使用css 你可以做到这一点：

td { width: 200px }