如何在表格的表体/表头部分周围创建边框？
我正在尝试创建一个包含表格数据的页面，该页面必须显示为多个表。然而，我有两个相互冲突的需求需要解决：
- 每个表都必须有一个边框。每个表的
- 列宽必须能够根据内容调整大小。但是，所有表的列宽必须一致。(即，列的大小基于该列中所有表中的最大单元格)。
为了处理第二个需求，我有一个包含多个thead和tbody部分的顶级表。这完美地完成了第二个任务。从本质上讲，我在一个更大的父表中创建了多个伪表，并将其分组为一个带有tbody的单个thead：
<table>
<thead>
table1 header content...
</thead>
<tbody>
table1 body content...
</tbody>
<thead>
table2 header content...
</thead>
<tbody>
table2 body content...
</tbody>
</table>现在，我正在尝试解决第一个需求。每个伪表必须在其周围有一个边框，将其自身伪装成一个真正的表。
我发现，令我沮丧的是，IE6/7不允许在a/ tbody标签周围添加边框样式，或者我会简单地向a添加上/左/右边框样式，向tbody添加下/左/右边框样式。
为这些工作创建真正的表格和边框可以解决第一个问题，但它违反了第二个问题。
另一种选择是使用第一个孩子和最后一个孩子的样式来创建我的边框。不幸的是，这既不美观，也不适用于IE6/7。
我一直在寻找的另一种选择是在整个表格周围创建一个边框，并尝试在伪表之间创建一行来创建我的分离，但是虽然我可以为它创建上/下边框，但我还没有找到一种方法来擦除该行的表的左/右边框。这有可能吗？
我最后的选择是创建用于绘制左、右、上、下边框的类，设置适当的表单元格来使用这些类。我知道这最终会起作用，但它非常笨拙，而且会造成非常混乱的标记。Colgroups不能在这里拯救我，因为他们不能处理边框样式。这是不幸的，因为它会使这个解决方案更容易接受。
有没有更好的方法来完成我可能错过的边界？
回答 2
Stack Overflow用户
发布于 2009-09-08 21:13:04
对rules使用<table rules="groups">或类似的值
Stack Overflow用户
发布于 2009-09-08 21:13:43
使用创建正版表的方法，然后尝试此方法。
我只想创建单独的表。让我们假设每个表如下所示：
<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>https://stackoverflow.com/questions/1396317
复制相似问题