将 2 个表格列宽相互对齐

Question

我有 2 个表，一个在另一个之上，我想将它们的列宽完全对齐，有没有办法做到这一点？尝试了固定表列宽度等没有乐趣

您可以在 fiddle 中看到各列彼此之间略有偏离 http://jsfiddle.net/askhe/

HTML

<table class="tblresults txtblack">
                            <tr class="tblresultshdr bold">
                                <td class="col1">Company</td>
                                <td>Currency</td>
                                <td>Bid</td>
                                <td>Ask</td>
                                <td>YTD Vol</td>
                            </tr>
                            <tr>
                                <td class="col1">ABC</td>
                                <td>GBP</td>
                                <td>94</td>
                                <td>16</td>
                                <td>3,567,900</td>
                            </tr>
                            <tr>
                                <td class="col1">DEF</td>
                                <td>GBP</td>
                                <td>3</td>
                                <td>46</td>
                                <td>10,000</td>
                            </tr>
                            <tr>
                                <td class="col1">GHI</td>
                                <td>GBP</td>
                                <td>3</td>
                                <td>46</td>
                                <td>10,000</td>
                            </tr>
                            <tr>
                                <td class="col1">JKLM</td>
                                <td>GBP    </td>
                                <td>7</td>
                                <td>46</td>
                                <td>56,000</td>
                            </tr>

</table>
                        <table class="tblresults txtblack margintop10">
                            <tr>
                                <td colspan="5" class="bold" >Investments</td>
                            </tr>
                            <tr>
                                <td class="col1">ghjk</td>
                                <td>GBP</td>
                                <td>13</td>
                                <td>6</td>
                                <td>130,000</td>
                            </tr>
                            <tr>
                                <td class="col1">asdsa</td>
                                <td>GBP</td>
                                <td>120</td>
                                <td>46</td>
                                <td>16,000</td>
                            </tr>
                            <tr>
                                <td class="col1">dfdsfsdf </td>
                                <td>GBP</td>
                                <td>1</td>
                                <td>4</td>
                                <td>13,000</td>
                            </tr>
                       </table>​

CSS

table.tblresults {
    width:100%;
    *width:99.5%;
    border: 1px solid #b9b8b8;
    top: 0;
}
table.tblresults tr.tblresultshdr {background: lightgrey;}
table.tblresults tr.tblresultshdr td {padding: 6px;}
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;}
table.tblresults td.col1 {width: 70%;}
​

Answer 1

table 元素用于科学数据，例如来自实验的探针，而不是用于实际布局：

表格不应纯粹用作布局文档内容的一种方式，因为这可能会在呈现到非可视媒体时出现问题。此外，当与图形一起使用时，这些表格可能会迫使用户水平滚动以查看在具有更大显示器的系统上设计的表格。为了尽量减少这些问题，作者应该使用样式表而不是表格来控制布局。

虽然您没有将它们用于布局，但您的问题实际上是渲染/布局问题。最简单的解决方案是merge both tables into one (jsfiddle)。

如果您希望将数据封装在许多小表格中而不是一张大表格中，则需要为几乎所有列指定宽度。

Answer 2

为什么不把它们放在同一张桌子上呢？看起来它们在语义上是相似的。 http://jsfiddle.net/askhe/5/

Answer 3

不用合并表，可以用这个

table-layout: fixed;

这里有一篇关于它的精彩文章 https://css-tricks.com/fixing-tables-long-strings/

Answer 4

虽然我同意在许多情况下合并表格的解决方案是最好和最简单的解决方案，但我开始需要真正拥有这 2 个具有相同列的单独表格（以使一个表格固定并且第二个可滚动）

为了实现这一点，我声明了 2 个具有相同列数的表，一个具有宽度规则（% 和 px），一个没有

然后，使用 Javascript，我将规则表的宽度应用于空闲表：

document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ;
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ;

第一行固定表格宽度，然后逐列完成。使用.clientWidth 很重要，因为.style.width 发送一个百分比，如果它是应用于规则列的百分比。

这几乎可以正常工作，但并不完全正常。表格有类似的布局，但偏移了几个像素。因为我只需要在 IE 中工作，我虽然可以用固定值移动它，尽可能接近我想要的，所以我将代码更改为：

document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10;

我猜不同表的值可能不同。但令我惊讶的是，它可以在所有主流浏览器中使用，与缩放级别无关

windows resize 会破坏对齐，因此您需要将函数绑定到此事件。此外，此解决方案不再适用于极端大小的表格

这里是jsfiddle，因为涉及到一些 CSS。目前它不适用于缩放，因为我的浮动标题不坚持right: 0px，还不知道为什么

Answer 5

好吧，使用这个简单的 HTML sn-p 你可以做到。就我而言，我是从 HTML 创建 pdf 的，所以这个解决方案对我有用。希望它可以帮助别人。

<table border=0>
  <tr>
    <td>
      <!--Insert table 1 -->
    </td>
    <td>
      <!--Insert table 2 -->
    </td>
  </tr>
</table>