我怎样才能使多个HTML表具有相同的列宽

我有多个HTML表。每个表格具有相同的列数，但每个单元格中具有不同的数据集。我怎样才能使多个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）是根据单元格中的数据进行更改的。

有什么建议吗？

来源

2011-04-06 leora

你给所有'td'的宽度吗（*但是不要给表格宽度）？ – 2011-04-06 15:14:34

对于大多数灵活性我会提供它自己的类中的每个列。

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，你也可以使用第n个孩子选择实现这一目标这将减少对HTML你的量的奢华我需要写。

来源

2011-04-06 15:29:08

我敢肯定，随着css你可以这样做：

td { width: 200px }

来源

2011-04-06 15:14:25 vbence

将固定宽度的<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>元素中。再说一遍，我不确定你的代码库如何适应这种重构，但我将它作为一个选项放在那里。

来源

2011-04-06 15:14:57 Asaph

使用多个''和''元素在我的情况下工作。 ''元素上的一些创造性的CSS样式允许各部分之间的虚拟空间使得它们看起来像独立表格，但所有列现在排成一列。 – Zarepheth 2015-02-09 17:34:36

通过为每个表格提供三个''元素，一个用于间隔符，一个用于标题，另一个用于传统列标题来完成创意CSS。 – Zarepheth 2015-02-09 17:35:53

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

来源

2011-04-06 15:15:21 tomsv

如果你甚至没有指出一个资源如何做到这一点，这并不是那么有用。 – Pureferret 2015-02-21 15:22:09

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

等。

来源

2011-04-06 15:17:00 Damb

我怎样才能使多个HTML表具有相同的列宽

回答

相关问题