Question

问题：我有HTML标记要处理，它包含嵌套在另一个表中的多个表。我希望“内表”都宽度相同。我也希望所有的“内部桌子”都不比自然状态下最宽的“内部桌子”的宽度宽。

我不想要简单地将所有表的宽度设置为某个固定的百分比，因为我事先并不知道最宽的“内部表”的宽度应该是什么直到HTML页面实际上是生成的。

Here is a visual example

^{_{来源：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上测试它，它会产生预期的效果。

Answer 2

为什么不能将内部表格设置为100％宽度并让它受外部表限制？如果您的外部表不是限制内部表的情况，那么您的示例在指定它时做得不是很好。

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

table.inner { width: 100%; }

Answer 3

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

Answer 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>

Answer 5

我看不出你如何绕过宽度：100％。这实际上就是你要做的事情：将每个表的宽度设置为包含元素的总宽度，其宽度由该列中最宽的嵌入表确定。

编辑添加：

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

Answer 6

直到运行时我才知道哪个表是“最外层”表（这是一个递归生成的潜在无限深度的结构）。

你需要知道吗？

围绕div或表格包装所有内容，给它一个固定的或百分比宽度以使其正确进入您的网页设计，然后所有容器表应设置为100％

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

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

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

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

如何将多个单独的HTML表格与最宽表格的宽度相同

6 个答案: