16

我正在尝试使用表格数据创建一个页面，该页面必须显示为多个表格。但是，我有两个相互矛盾的要求要解决：

  1. 每个表都必须有一个边框。
  2. 每个表格的列宽必须能够根据内容重新调整大小。但是，所有表的列宽必须一致。（即列的大小基于所有表中该列中的最大单元格）。

为了处理第二个要求，我有一个包含多个 thead 和 tbody 部分的顶级表。这很好地完成了#2。本质上，我在一个更大的父表中创建了多个伪表，它们被分组为一个带有 tbody 的单独的表：

<table>
   <thead>
      table1 header content...
   </thead>
   <tbody>
      table1 body content...
   </tbody>
   <thead>
      table2 header content...
   </thead>
   <tbody>
      table2 body content...
   </tbody>
</table>

现在，我正在尝试解决第一个要求。每个伪表都必须有一个边框，将自己伪装成真正的表。

令我沮丧的是，我发现 IE 6/7 不允许在 thead/tbody 标签周围添加边框样式，或者我会简单地为 thead 添加一个上/左/右边框样式和一个下/左/右边框风格到tbody。

为这些工作创建真正的表格和样式边框以解决#1，但它打破了#2。

另一种选择是使用 first-child 和 last-child 样式来创建我的边框。不幸的是，这既不美观，也不适用于 IE 6/7。

我一直在研究的另一种选择是在整个表格周围创建一个边框，并尝试在伪表格之间创建一行，从而创建我的分隔，但是虽然我可以为其创建顶部/底部边框，但我还没有发现表示仅删除该行的表格左/右边框。那可能吗？

我最后的选择是创建用于绘制左、右、上和下边框的类，设置适当的表格单元格以使用这些类。我知道这最终会奏效，但它非常笨拙，并且会导致非常混乱的标记。Colgroups 无法在这里拯救我，因为它们无法处理边框样式。这是不幸的，因为它会使这个解决方案更容易接受。

有没有更好的方法来完成我可能错过的边界？

4

2 回答 2

13

使用<table rules="groups">或类似的值rules

见http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

于 2009-09-08T21:13:03.680 回答
-3

用创建正版表的方法，然后试试这个。

我只想创建单独的表。假设每个表如下所示：

<table>
    <thead>
        <tr>
            <th class="column_1">Header 1</th>
            <th class="column_2">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        ...
    </tbody>
</table>

然后，使用 jQuery 设置宽度：

var columnOneWidth = 0; var columnTwoWidth = 0;

$(document).ready( function() {
    $(".column_1").each( function() {
        if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
    });
    $(".column_2").each( function() {
        if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
    });

    $(".column_1").css({width: columnOneWidth + "px"});
    $(".column_2").css({width: columnTwoWidth + "px"});
});

您所要做的就是在您的 head 标签中包含 jQuery Javascript 文件（可从 jquery.com 获得）：

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>
于 2009-09-08T21:13:42.780 回答