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

Posted 2023-03-05

【中文标题】如何在表格的 tbody/thead 部分周围创建边框？

【英文标题】：How do I create borders around tbody/thead sections of a table?

【发布时间】：2010-11-26 15:33:45

【问题描述】：

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

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

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

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

【问题讨论】：

不幸的是，没有。我的主要受众可能不会启用 javascript。

请注意，每个table 只允许一个thead，至少在当前规范中是这样。 html.spec.whatwg.org/multipage/tables.html#the-table-element

【参考方案1】：

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

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

【讨论】：

这确实在每个 tbody/thead 的顶部/底部添加了边框，但它似乎在伪表之间留下了左/右边框（至少在 IE7 中），这是我试图避免的.

你可以试试rules和frames属性的组合

【参考方案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>

【讨论】：

哦，每个表的<thead> 中的每个<th> 都需要具有您选择的类名。您需要为每一列设置一个类。

这不是更好的方法 - 当然