Question

我有两个直接在彼此之上的HTML表。每个表具有相同的列数，但它们包含的文本可能不同。每个表可以包含很多行。我希望这两个表具有完全相同的列宽，以便列始终排列。我不介意列中的文本是否包含必要的内容。由于其他原因，我无法将所有行合并到一个表中。

有没有办法让这种情况发生？

请注意，此解决方案只能在Firefox和IE的最后两个版本中使用。

Answer 1

我建议在列上使用百分比宽度，确保这些宽度总是加起来为100％。

<style type="text/css">
  table { width: 100%; }
  td.colA { width: 30%; }
  td.colB { width: 70%; }
</style>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

Answer 2

据我所知，你无法对齐两个表的列。

您可以创建一个表并使用css使其看起来像两个。

<table>
  <tr> <!-- First table header --> </tr>
  <tr> <!-- First table rows... --></tr>
  <tr> <!-- First table footer... --></tr>
  <tr> <!-- Empty space between tables --> </tr>
  <tr> <!-- Second table header --> </tr>
  <tr> <!-- Second table rows... --></tr>
  <tr> <!-- Second table footer... --></tr>
</table>

Answer 3

表格单元格本质上是流动的，因此除非您为列提供固定宽度（固定当然也可以是百分比），因此仅在html / css中是不可能的。

您当然可以使用javascript查找最宽的表格，获取其列宽并将这些值用于较小的表格，但是belugabob建议的解决方案对您的问题的评论要好得多。

Answer 4

我的IE 9，Chrome 14和FireFox 8上的网站也有类似的情况我的表包含四列，奇数包含标签，甚至包含输入。我的页面上有四个表格，每个表格的所有列都垂直对齐。希望这些步骤有所帮助

1-从任何地方下载透明图像，可能大小为1x1，以便您可以根据需要调整其大小（不确定图像是否也可以通过css缩小）

2-将您的表格定义为

    <table class="formed">
            <tr>
                <th class="colLabel"></th>
                <th class="colField"></th>
                <th class="colLabel"></th>
                <th class="colField"></th>
            </tr>
        <tr>
            <td></td>
[now rest of your columns row by row]

3-将您的CSS定义为

.colLabel
{
    text-align:right;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:8em;
}
.colField
{
    text-align:left;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:20em; 
}

.formed
{
    width:90%;
    table-layout:fixed;
    padding:0;
    margin:0;
}

使2个表具有相同的列大小

4 个答案: