将 2 个表格列宽相互对齐

Posted 2023-03-06

【中文标题】将 2 个表格列宽相互对齐

【英文标题】：align 2 table column widths with each other

【发布时间】：2012-07-28 07:19:30

【问题描述】：

我有 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%;
​

【问题讨论】：

您的表格有 100% 的宽度，因此您可以对列使用成比例的宽度（如果您愿意，也可以使用百分比）。两列将是相同的（直到它们共享相同的列数）。

这两张表为什么不能合二为一？ jsfiddle.net/j08691/askhe/2

我不能合并它们的原因是它们有来自不同来源的数据。以上使用虚拟数据。

【参考方案1】：

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

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

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

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

【讨论】：

如果我不使用表格，我应该如何布局数据，使用 div？我认为表格应该用于表格数据？！？

当然你应该使用它们。对不起，如果这不清楚。但是您遇到了渲染问题，您应该将所有内容打包到 one 表中，或者为每列设置列宽。您也可以使用 <colgroup>/<col> 代替 CSS。

嗯，我尝试为每个列设置宽度，这在开始时很好，但是当我缩小窗口时，事情开始变得有点混乱

这就是为什么按照j08691 和Cypress 的建议使用单个表应该更容易。

这就是它最初的设置方式，但是当循环数据并将其添加到表中时，您不能只在中途切换数据源，也许您可​​以但要完成一些工作.

【参考方案2】：

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

【参考方案3】：

不用合并表，可以用这个

table-layout: fixed;

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

【讨论】：

我遇到了类似的问题，这是我使用的解决方案

【参考方案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，还不知道为什么

【参考方案5】：

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

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

【讨论】：

如果有人投了反对票，至少他们应该评论他们为什么这样做。所以，如果我犯了错误，我最好不要再犯了。

投反对票，因为这不能解决问题。它只是将两张桌子并排放置。

嗯，感谢您的回复。但是，我已经明确提到了i was creating pdf's from HTML。这解决了我的问题。