CODEWITHSUNDEEP
html
abe1432181
abe1432181

Reputation: 1316

Uneven table cells when changing display none

I am having trouble with my HTML tables when I hide and show rows using JavaScript (display:block). I need to hide rows through JavaScript but when I re-show the rows, then I find that the table grid layout is lost and the previously hidden row is collapsed into the left side of the grid.

My sandbox code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    table {
    }
    .rowA {
        background-color: #70cdb3;
    }
    .rowB {
        background-color: #fff1dc;
    }
    .rowC {
        background-color: #edc7ff;
    }
    .cell {
        border: solid 3pt white;
        width:25%;
    }
    a {
        cursor: pointer;
    }
</style>

<SCRIPT type='text/JavaScript'>
    function hide(elemid) {
        var elem=document.getElementById(elemid);
        elem.style.display='none';
    }

    function show(elemid) {
        var elem=document.getElementById(elemid);
        elem.style.display='block';
    }
</SCRIPT>
</head>
<body>

<table>
<tr class='rowA'>
    <td class='cell'>
    <a onClick="hide('row1')">Hide Row1</a>
    </td>
    <td class='cell'>
    <a onClick="show('row1')">show Row1</a>
    </td>
</tr>
<tr class='rowB'>
    <td class='cell'>
    <a onClick="hide('row2')">Hide Row2</a>
    </td>
    <td class='cell'>
    <a onClick="show('row2')">show Row2</a>
    </td>
</tr>
<tr class='rowC'>
    <td class='cell'>
    <a onClick="hide('row3')">Hide Row3</a>
    </td>
    <td class='cell'>
    <a onClick="show('row3')">show Row3</a>
    </td>
</tr>
</table>
<hr>
<table class='table' style='width:50%'>
<thead>
<tr>
    <th>ID</th>
    <th>Name</th>
    <th>Job</th>
    <th>Email</th>
</tr>
</thead>
<tbody>
<tr class='rowA' id='row1'>
    <td class='cell'>one</td>
    <td class='cell'>Johnny Five</td>
    <td class='cell'>Robotin'</td>
    <td class='cell'>[email protected]</td>
</tr>
<tr class='rowB' id='row2'>
    <td class='cell'>two</td>
    <td class='cell'>Super notsolong</td>
    <td class='cell'>Doin' stuff</td>
    <td class='cell'>[email protected]</td>
</tr>
<tr class='rowC' id='row3'>
    <td class='cell'>three</td>
    <td class='cell'>Super Superlonglastnamesmith</td>
    <td class='cell'>Doin' stuff</td>
    <td class='cell'>[email protected]</td>
</tr>
</tbody>
</table>


</body>
</html>

Using the sandbox, the problem is when I click on the Hide row buttons at the top of the sandbox, and then Show the row again - then the rows cells collapse into the left.

Note, this seems to occur in IE 10, Edge, Chrome, and Firefox, but not IE9

What am I doing wrong?

Thanks

A

Upvotes: 1

Views: 993

Answers (2)

Gus Costa
Gus Costa

Reputation: 619

The default display option for table rows is table-row, you can't use block.

function show(elemid) {
    var elem=document.getElementById(elemid);
    elem.style.display='table-row';
}

When in doubt you can set a blank value to the display property, it will return to its default value.

This will work too.

function show(elemid) {
    var elem=document.getElementById(elemid);
    elem.style.display='';
}

Upvotes: 4

Stefan Dochow
Stefan Dochow

Reputation: 1454

<tr> is not a block element. So displaying it as such within a table context creates weird results. The proper value here is display:table-row;

Check here please: http://jsfiddle.net/v05nhb9y/

your code would look like this then:

function hide(elemid) {
     var elem=document.getElementById(elemid);
     elem.style.display='none';
 }

function show(elemid) {
    var elem=document.getElementById(elemid);
    elem.style.display='table-row';
}

Upvotes: 2

Related Questions