如何在表格的 tbody/thead 部分周围创建边框？

Question

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

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 无法在这里拯救我，因为它们无法处理边框样式。这很不幸，因为它会使这个解决方案更容易接受。

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

Answer 1

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

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

Answer 2

按照创建正版表的方法，试试这个。

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

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