Hiding TR's - Borders Being Included_问答_开发者

开发者 https://www.devze.com 2022-12-15 21:31 出处：网络

Simply doing something along the lines of $(\"tr.myclass\").hide(); will hide the relevant rows.However, if I have a border against the td\'s contained within that tr, then they still show after th

相关专题：jquery

Simply doing something along the lines of

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

will hide the relevant rows. However, if I have a border against the td's contained within that tr, then they still show after the tr has been hidden. Therefore, the original table has a 1px border on the bottom of the td elements. The place where the sets of rows are hidden cause a two pixel border to instead take their place.

I'm assuming this is because the tr is being hidden and not the td, so the border still exists. However that shouldn't matter, everything contained within the tr should be hidden.

I'm a bit lost on this one as no-one on the interwebs seem to have encountered it, at least, not by my search critera.

开发者_StackOverflow中文版

Any ideas?

EDIT

Okay, try it whilst using <col /> and <colgroup></colgroup>, you'll find it's reproducable. My colleague told me to get rid of the col and colgroups and hey presto, it works fine. This was in IE8 (I'm not an IE user, but this is for an IE-only project). Very strange.

The border doesn't belong to the cells, rather it belongs to the table and is displayed between the cells. Hiding the row will hide the cells but not remove them, so the border between the cells is still there.

Tables are not intended to be used that way, if you hide parts of a table it will behave erratically or unexpectedly. The table structure doesn't change when you hide elements, so the table will not display as if the hidden elements didn't exist. If you want to remove table rows from the table you have to actually remove the tr elements from the table.

I've tried to reproduce this with the following code:

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

The borders are hidden along with the td element contents.

i've come across a similar problem. when hiding, or even removing a tr, the table header's left border is 'leacking' down to the tds below.