Question

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

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

为了处理第二个要求，我有一个单独的顶级表，其中包含多个thead和tbody部分。这完美地完成了＃2。基本上，我在一个较大的父表中创建了多个伪表，分组为一个带有随附tbody的thead：

<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"});
});

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

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>

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

2 个答案: