两张桌子在一起，其中两张桌子的视觉宽度都较大

Question

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

为了便于论证，假设顶部表有8列，底部表有3列。如何使底部表格与顶部表格占据相同的视觉宽度？

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

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

Answer 1

我想你正在寻找这样的东西：

工作示例

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：

工作示例2

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;

Answer 2

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

给它们定义相同的宽度有什么错？你不会做table { width: 500px; }吗？

Answer 3

您可以尝试将它们包装成这样的div：

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

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