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

Posted 2023-03-05

【中文标题】如何使多个 html 表具有相同的列宽

【英文标题】：How can I make multiple html tables have the same column widths

【发布时间】：2011-07-30 22:25:01

【问题描述】：

我有多个 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）正在根据单元格中的数据进行更改。

有什么建议吗？

【问题讨论】：

您是否为所有tds 指定了宽度（但没有为表格指定宽度）？

【参考方案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>

【参考方案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>

等等。

【参考方案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> 元素中。同样，我不确定您的代码库是否适合这种重构，但我将其作为一种选择。

【讨论】：

在我的情况下使用多个 <tbody> 和 <thead> 元素有效。 <thead> 元素上的一些创造性 CSS 样式允许部分之间的虚拟空间使它们看起来像独立的表格，但所有列现在都排成一行。

创意 CSS 是通过为每个表格提供三个 <thead> 元素来完成的，一个用于分隔符，一个用于标题，一个用于传统列标题。

【参考方案4】：

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

td  width: 200px