12

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

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

这是一个视觉示例

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

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

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

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

4

6 回答 6

8

我不知道任何 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's width()，因为后者不包括边框、填充或边距。在 IE7、FF、Safari、Opera 上进行了测试，效果很理想。

于 2009-02-11T19:20:26.423 回答
3

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

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

table.inner { width: 100%; }
于 2009-02-11T19:01:47.093 回答
1

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

于 2009-02-11T19:05:17.270 回答
1

将内部表编码为宽度=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>
于 2009-02-11T19:25:17.583 回答
0

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

编辑添加：

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

于 2009-02-11T19:04:01.127 回答
-1

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

你需要知道吗？

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

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

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

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

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

于 2009-02-11T19:46:01.837 回答