Question

我有一个在另一个上面的两个表格，我想将它们的列宽完全相互对齐，有没有办法做到这一点？尝试固定的表格宽度等没有欢乐

你可以看到小提琴彼此略微偏离 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

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

为了实现这一点，我声明了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 ;

第1行修复表格宽度，然后逐列完成。使用.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 4

无需合并表，您可以使用此

table-layout: fixed;

这里有一篇很棒的文章 https://css-tricks.com/fixing-tables-long-strings/

Answer 5

好吧，使用这个简单的HTML代码段就可以了。在我的情况下，我是从HTML创建pdf，所以这个解决方案对我有用。希望它可以帮助其他人。

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

将2个表格列宽相互对齐

5 个答案: