两个表在彼此上方，两者的视觉宽度是两者中较大的一个答案

【问题标题】：Two tables above each other where the visual width for both is the larger of the two两个表在彼此上方，两者的视觉宽度是两者中较大的一个
【发布时间】：2017-07-31 20:18:46
【问题描述】：

我有两张桌子，我想将一张堆叠在另一张之上，以便在视觉上它们看起来是一个实体 - 两者的宽度应该相等。

为了参数，假设顶部表格有 8 列，底部有 3 列。如何让底部表格与顶部表格占据相同的视觉宽度？

我想要这个的原因是因为顶部表格加载了单选按钮和复选框项目，而下部表格将始终只有一行，由取消按钮、数量字段和确定按钮组成。我有几十个不同宽度的顶部表格，但我只想编写底部表格中的一个，并在其中一个顶部表格中使用 Javascript 拖拽并将下部表格放在其下方，使其与顶部表格具有相同的宽度。

我坚持使用 html 和/或 CSS 来获得相同的宽度。我并不坚持较低的东西是一张桌子。如果有一个解决方案可以让我将这 3 个字段很好地集中在顶部表格的宽度内，那就太好了。

【问题讨论】：

标签： html alignment width css-tables

【解决方案1】：

我认为您正在寻找这样的东西：

Working Example

CSS

table {
    border:1px solid blue;
}
.table1 td {
    border:1px solid red;
    height:50px;
    width:50px;
}
.table2 td {
    height:50px;
    border: 1px solid green;
}

HTML

<table class="table1">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</table>
<table class="table2">
    <td></td>
    <td></td>
    <td></td>
</table>

jQuery

var width = function () {
    $('.table2').width($('.table1').width());
};

$(document).ready(width);
$(window).resize(width);

如果您更喜欢纯 JavaScript：

Working Example2

function tablewidth() {
    var table1 = document.getElementById('table1'),
        style = window.getComputedStyle(table1),
        width = style.getPropertyValue('width'),
        border = style.getPropertyValue('border-left-width'),
        w = parseInt(width, 10) + parseInt(border, 10) * 2 + 'px';

    document.getElementById('table2').style.width = w;
}
window.onresize = tablewidth;
window.onload = tablewidth;

【讨论】：

尝试了您的建议。它拉伸了顶部的桌子，然后将底部的桌子放在它下面以占据整个空间。我所追求的是不理会顶部的桌子——让它自然地占据它需要的宽度，然后将底部的宽度与它匹配。
经过反复试验，我想出了一个纯 HTML/CSS 的解决方案。我在 2 个表格周围包裹了一个 div，并将每个表格的 CSS 宽度设置为 100%。您的最新示例很有趣，它展示了如何在 JS 中进行操作。
@BillGradwohl 这实际上与我的第一个答案相同...唯一的区别是您使用的是 div 而不是正文
@BillGradwohl 我编辑了另一个解决方案，因为您说“我想要的是不理会顶部表格 - 让它自然占用所需的宽度，然后匹配底部宽度不管那是什么。”
你的例子给了我这个想法。使用 div 让一切变得不同。谢谢

【解决方案2】：

如何让底部表格占据与顶部表格相同的视觉宽度？

为它们定义相同的宽度有什么问题？不能table { width: 500px; }吗？

【讨论】：

我不知道宽度是多少。它会随着表格的缩小和宽度的增长而变化，具体取决于数据。我不想说明宽度，我想让顶部表格决定底部宽度。

【解决方案3】：

您可以尝试像这样将它们包装到一个 div 中：

<div id="table_wrapper">
    <table>...
    <table>....
</div>

通过 CSS 为 div 分配一个宽度，例如 80%，并将表格的宽度设置为 100%。这应该将它们拉伸到为外部 div 定义的最大宽度。

【讨论】：