Question

简单地按照

的方式做一些事情

$("tr.myclass").hide();

会隐藏相关的行。但是，如果我对该tr中包含的td有边框，那么它们在tr被隐藏后仍会显示。因此，原始表在td元素的底部有一个1px边框。隐藏行集的位置会导致两个像素边框取代它们。

我假设这是因为tr被隐藏而不是td，所以边框仍然存在。然而，这应该是无关紧要的，tr中包含的所有内容都应该被隐藏。

我对这一点感到有点失落，因为互联网上没有人似乎遇到过它，至少不是我的搜索标准。

有什么想法吗？

修改

好的，在使用<col />和<colgroup></colgroup>时尝试一下，你会发现它是可重复的。我的同事告诉我要摆脱col和colgroups并嘿presto，它工作正常。这是在IE8中（我不是IE用户，但这是一个仅限IE的项目）。很奇怪。

Answer 1

边框不属于单元格，而是属于表格并显示在单元格之间。隐藏行将隐藏单元格但不删除它们，因此单元格之间的边界仍然存在。

表不打算以这种方式使用，如果隐藏表的某些部分，它将表现不正常或意外。隐藏元素时表结构不会更改，因此表不会显示为隐藏元素不存在。如果要从表中删除表行，则必须从表中实际删除tr元素。

Answer 2

我尝试使用以下代码重现这一点：

<html>
<style>
td { border: 1px solid black; }
</style>
<body>
<table>
    <tr id="row1"><td>Row 1</td></tr>
    <tr id="row2"><td>Row 2</td></tr>
    <tr id="row3"><td>Row 3</td></tr>
</table>
<p>Hide row 2</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function(){
    $('p').click(function(){$('#row2').hide();});
});
</script>
</body>
</html>

边框与td元素内容一起隐藏。

Answer 3

我遇到过类似的问题。当隐藏，甚至删除tr时，表头的左边框是“漏出”到下面的tds。

隐藏TR - 包括边界

3 个答案: