如何使多个单独的 HTML 表格的宽度都与最宽的表格相同答案

【问题标题】：How to get multiple separate HTML tables to all be the same width as the widest table如何使多个单独的 HTML 表格的宽度都与最宽的表格相同
【发布时间】：2010-10-06 23:57:32
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

为什么要避免宽度：100%？是有实际原因还是只是固执？
我们需要知道的是您是否给外部桌子指定了特定的尺寸。您从未指定，所以我们假设您没有指定。
哪一个在外面并不重要，重要的是它是否有宽度。
这就是重点，我不希望 any 表有宽度，因为我事先不知道它应该是什么宽度。（如果我选择 100%，那么最终成为“最外层”的内容将填满整个页面），即使文本本身的自然宽度不足以跨越整个页面。
drefty，有什么理由我的回答对你不起作用？我不是想强迫你的喉咙 100% 宽度:)

标签： html css user-interface html-table

【解决方案1】：

我不知道任何 HTML/CSS 技巧来完成它，但既然你对 jQuery 持开放态度......

假设你所有的内部表都有一个'inner'类，你可以这样做：

$(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上测试过，效果不错。

【讨论】：

如果 table.inner 是递归的，我不知道这是否可行。
@Paolo：这本身不起作用，但 offsetWidth 是一个好主意，其他人似乎都没有想到。一种改进是将“深度”整数附加到类名并使用递归函数将每个深度级别视为一个集合。
@dreftymac: 无论如何你可以给我一个嵌套表的示例 HTML 代码以及它们的外观 + 你是否可以控制根据深度放置不同的类？我可以编辑我的答案以适应那时。无论哪种方式，希望它有所帮助。

【解决方案2】：

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

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

table.inner { width: 100%; }

【讨论】：

请查看更新，了解为什么我特别要求提供除此解决方案之外的任何其他内容。
问题是，直到运行时我才知道哪个表将是“外部表”。如果我在 any 表上设置 100%，则该表在运行时可能是“外部”表。这会自动使您的解释中的假设无效。
但您只需要在编写它们时标记它们。不知何故，这是不正确的，但保罗的是？他们不是都只在一些表上需要一个名为“inner”的类吗？
如果你用 div 包围它就不会
@MrChrister：Paolo 是公认的答案，不是因为它是完整的，而是因为他最接近实际回答我的问题。如果您将“深度”整数附加到类名（例如，inner0、inner1、inner2 等），Paolo 的答案会变得更加完整，从而唯一地处理深度。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

<HTML>
<HEAD>

<TITLE>Mike Test</TITLE>
</HEAD>
<BODY>

<table border=1>
  <tr><td>
    <table border=1>
      <tr>
      <td>First</td>
      <td>Second</td>
      </tr>
    </table>
  </td></tr>
  <tr><td>
    <table border=1>
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
    </table>
  </td></tr>
</table>



<table border=1>
  <tr><td>
    <table border=1 width="100%">
      <tr>
      <td>First</td>
      <td>Second</td>
      </tr>
    </table>
  </td></tr>
  <tr><td>
    <table border=1 width="100%">
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
    </table>
  </td></tr>
</table>

</BODY>
</HTML>

【讨论】：

【解决方案5】：

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

编辑添加：

如果你真的想不惜一切代价避免它，你总是可以使用原型来获取元素的实际宽度（以像素为单位），然后将最大宽度重新应用于所有其他元素。使用原型和行为可能很容易完成。

【讨论】：

【解决方案6】：

直到运行时我也不知道哪个表将是“最外层”表（这是一个递归生成的结构，可能具有无限深度）。

你需要知道吗？

将所有内容包裹在 div 或表格周围，为其设置固定宽度或百分比宽度以使其适合您的网页设计，然后应将所有容器表格设置为 100%

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

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

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

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

【讨论】：

问题是，我希望 content-wrapper 与最胖的子表一样宽并且不会比它更宽。换句话说，我希望内容包装器尽可能小，而不会剪切任何子表的文本。您的答案假定为 450 像素，这根本不是我要问的。
实际上他并没有假设 450px，因为他将该宽度分配给 CLASS 内容包装器，然后给他的 div 一个内容包装器 ID。所以他的 div 真的没有宽度。它仍然可以正常工作。
@d03boy：你关于 CLASS 与 ID 的观点是正确的，实际上虽然它可能只是一个错字，即使不是，它仍然不起作用，因为 100% 导致表跨越页面的全宽。外部 DIV 只是盲目地扩展 100% 以容纳它们。
我现在明白了。我不认为 div 会随着它们一起扩展。