如何使多个单独的HTML表都与最宽的表具有相同的宽度

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

我不想简单地将所有表的宽度设置为某个固定的百分比，因为在实际生成HTML页面之前，我不知道最宽的“内部表”的宽度应该是多少

资料来源：

我希望所有的表都与内部表零的宽度相同。目前，没有一个表具有指定的宽度，这是我喜欢的方式，因为我希望所有内部表都能自然地选择默认情况下最宽的表的宽度

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

---

更新：我要删除这个问题，因为人们似乎想否决我的意见，因为我没有理由不想100%。我有一个很好的理由。。。在运行时之前，我也不知道哪个表是“最外层”的表（这是一个递归生成的结构，具有潜在的无限深度）。

为什么不能将内部表设置为100%宽度，并让外部表限制它？如果您的外部表不会限制内部表，那么您的示例在指定这一点方面做得不是很好

您正在寻找的CSS“技巧”是：

table.inner { width: 100%; }

---

我看不出你怎么能绕过宽度：100%。这本质上就是您要做的：将每个表的宽度设置为包含元素的总宽度，其宽度由该列中最宽的嵌入表决定

编辑以添加：

如果您真的想不惜一切代价避免它，您可以始终使用prototype来获取元素的实际宽度（以像素为单位），然后将最大宽度重新应用于所有其他元素。

---

使用原型和行为可能很容易完成。

您可以使用JavaScript根据最宽的表更新每个表的宽度。但我感觉你在寻找一个无脚本的解决方案。。。（对吗？

我不知道有什么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上对其进行了测试，并达到了预期效果。

将内部表格的宽度全部编码为100%，然后它们将与外部表格的宽度相同。如果希望内部表的所有列具有相同的宽度，则必须在其列标题（或第一行）上指定这些宽度

迈克试验
弗斯特
第二
1.
2.
弗斯特
第二
1.
2.

在运行时之前，我也不知道哪一个表是“最外层”的表（这是一个递归生成的结构，具有潜在的无限深度）

你需要知道吗

将所有内容围绕一个div或表进行包装，给它一个固定的或百分比的宽度，使其适合您的web设计，然后所有容器表都应设置为100%

.content-wrapper { width: 450px; }
table { width: 100%; }

<div id="content-wrapper">
    <!-- all your tables/content/divs/etc -->
</div>

.content包装{宽度：450px；}
表{宽度：100%；}

这就是每个人都做的，这就是为什么在代码的所有设计元素中都有称为Wrappers的DIV，以达到您的目的

---

请不要试图重新发明轮子。。。每个人都这样做，你不是第一个。

为什么要避免宽度：100%？有什么真正的原因吗，还是你太固执了？我们需要知道的是，你是否给了外桌一个特定的尺寸。你从未指定过，所以我们假设你没有指定。哪一个是外部并不重要，重要的是它是否有宽度。这就是重点，我不希望任何表有宽度，因为我事先不知道它应该是什么宽度。（如果我选择100%，那么任何最后成为“最外层”的内容都会填满整个页面），即使文本本身不够宽，无法跨越整个页面。德雷夫特，我的答案对你不适用吗？我并不是要强迫你使用100%的宽度：）请查看更新，了解我为什么特别要求使用此解决方案以外的任何其他解决方案。问题是，在运行时之前，我不知道哪个表将是“外部表”。如果我在任何表上设置100%，则该表在运行时可能是“外部”表。这会自动使你的解释中的假设无效，但你只需要在写的时候给它们贴上标签。不知怎的，这是不正确的，但保罗的是？它们不是都只在一些表上需要一个名为“inner”的类吗？如果用div@MrChrister当前位置保罗的回答之所以被接受，并不是因为它是完整的，而是因为他最接近于真正回答我的问题。如果你在类名（例如inner0、inner1、inner2等）上加上一个“depth”整数，那么Paolo的答案会更完整，这样可以唯一地处理深度。如果表是递归的，我不知道这是否会起作用。inner是递归的。@Paolo:这本身不起作用，但offsetWidth是一个没有人想到的好主意。一种改进方法是在类名中附加一个“depth”整数，并使用递归函数将每个深度级别视为一个集合。@dreftymac:您是否可以给我一个嵌套表的HTML代码示例以及它们的外观+您是否可以根据深度控制放置不同的类？我可以编辑我的ans

.content-wrapper { width: 450px; }
table { width: 100%; }

<div id="content-wrapper">
    <!-- all your tables/content/divs/etc -->
</div>