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

你如何使用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 2

将固定宽度应用于<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个表之间出现的任何标记都需要成为较大表的一部分。您可以将该内容放在第3个<tbody>元素中，如果需要，只包含一行和一个单元格。同样，我不确定你的代码库有多好用于这种重构，但我会把它作为一种选择。

Answer 3

为了获得最大的灵活性，我会为每一列提供“自己的类”。

CSS

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

HTML

<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>

如果你有使用CSS3的奢侈，你也可以使用nth-child选择器来实现这一目标，这将减少你需要编写的HTML数量。

Answer 4

我确信使用css你可以这样做：

td { width: 200px }

Answer 5

在加载表格后尝试使用javascript。

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

5 个答案: