0

我有两张桌子，我想把一张放在另一张上面，这样在视觉上它们看起来是一个实体——两者的宽度应该相等。

为了论证起见，假设顶部表格有 8 列，底部有 3 列。如何获得它以使底部表格占据与顶部表格相同的视觉宽度？

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

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

4

3 回答 3

0

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

工作示例

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;
于 2013-07-28T04:13:51.337 回答
0

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

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

于 2013-07-28T03:49:24.590 回答
0

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

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

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

于 2013-07-28T03:50:13.033 回答