html - 如何让多个单独的 HTML 表格都与最宽表格的宽度相同

Question

问题:我有 HTML 标记要处理，它由嵌套在另一个表中的多个表组成。我希望“内表”的宽度都相同。我还希望所有“内表”的宽度不超过自然状态下最宽的“内表”的宽度。

我不只想将所有表格的宽度设置为某个固定百分比，因为我事先不知道最宽的“内部表格”的宽度应该是多少，直到 HTML页面实际生成。

^{_{来源:https://en.wikipedia.org/wiki/File:Erasene-screen001.png}}

我希望所有表格的宽度都与 inner-table-zero 相同。目前，所有表格都没有分配宽度，这就是我喜欢的方式，因为我希望所有内部表格自然地选择默认情况下最宽的表格的宽度。

问题:是否有人知道任何 CSS 或 JQuery 或 Javascript 技巧可以获得所需的样式？

更新:我即将删除这个问题，因为人们似乎想对我投反对票，因为他们没有充分的理由不希望 100% 投票。我确实有一个很好的理由......我也不知道直到运行时哪个表将是“最外层”表(这是一个递归生成的潜在无限结构深度)。

Answer 1

我不知道有什么 HTML/CSS 技巧可以完成它，但是既然你对 jQuery 持开放态度......

假设您所有的内部表都有一个“内部”类，您可以这样做:

$(document).ready(function() {
    var largest = 0;
    $('table.inner').each(function() {
        var width = $(this)[0].offsetWidth;
        if(width > largest) {
            largest = width;
        }
    }).width(largest);
});

编辑:更新我的答案以使用 offsetWidth 而不是 jQuery 的 width()，因为后者不包括边框、填充或边距。在 IE7、FF、Safari、Opera 上进行了测试，并给出了预期的效果。