All geek questions in one place

Hiding TR - Borders Included

Just do something in the lines

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

will hide the corresponding lines. However, if I have a border with td contained inside this tr, then they are still displayed after tr has been hidden. Therefore, the original table has a 1px border at the bottom of the td elements. The place where the rowsets are hidden leads to the fact that instead it will take up space with two pixels.

I guess this is because tr is hiding, not td, so the border still exists. However, it does not matter, everything contained in tr should be hidden.

I got a little lost on this because none of the intercepts seemed to encounter this, at least not by search criteria.

Any ideas?

EDIT

Well, try using <col />and <colgroup></colgroup>, you will find it reproducible. My colleague told me to get rid of my colleagues and colleagues, and hey presto, it works great. This was in IE8 (I'm not an IE user, but this is for an IE-only project). Very strange.

+3
source share
3 answers

A border does not belong to cells; rather, it belongs to a table and is displayed between cells. Hiding the row will hide the cells but not delete them, so the border between the cells still exists.

, , . , , . , .

+3

:

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

+2

I ran into a similar problem. when hiding or even deleting tr, the left border of the table header is “compressed” to tds below.

0
source

Source: https://habr.com/ru/post/1727224/

More articles:


All Articles