12

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

您可以在小提琴上看到这些列彼此略微偏离 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%;}
​
4

5 回答 5

6

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

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

虽然您没有将它们用于布局，但您的问题实际上是渲染/布局问题。最简单的解决方案是将两个表合并为一个 (jsfiddle)。

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

于 2012-07-30T15:40:48.470 回答
3

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

于 2012-07-30T15:44:52.693 回答
2

不用合并表，可以用这个

table-layout: fixed;

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

于 2020-01-26T11:21:18.973 回答
0

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

为了实现这一点，我声明了 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，不知道为什么

于 2016-05-26T10:04:00.640 回答
-2

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

<table border=0>
  <tr>
    <td>
      <!--Insert table 1 -->
    </td>
    <td>
      <!--Insert table 2 -->
    </td>
  </tr>
</table>
于 2017-09-26T11:37:19.843 回答