0

I have a table with vertical scroll. I keep some rows collapsed and managed by some script.

<html lang="en">
<head>

    <style type="text/css">
        table {  border: 1px solid black;
                 border-collapse: collapse;
                 overflow-y: scroll;
                 display: inline-block; }
        tr td {  border: 1px solid black; }
        tr.hide { visibility: collapse;}
    </style>

</head>
<body>
  <table>
    <tr><td> Uno </p></td></tr>
    <tr class="hide"><td> Due </p></td></tr>
    <tr><td> Tre </p></td></tr>
    <tr class="hide"><td> Quattro </p></td></tr>
  </table>
</body>
</html>

To allow extra content I use overflow-y: scroll and display: inline-block, but this creates a space at the end of the table, after the last row, due to the hidden content. The table is sized correctly, but even if there is no overflow, a scroll bar is shown (scrolling the void).
I see this in Chrome and Firefox.

Any ideas on how to made those rows really invisible?

Thomas
  • 185
  • 1
  • 7

1 Answers1

0

If you want those rows invisible just use

tr.hide { display: none;}

If you want those rows visible just use

tr.hide { display: table-row;}

Related Problem link Show/Hide Table Rows using Javascript classes

Mamun
  • 145
  • 11
  • This works and it is the most obvious solution... but the peculiarity of "visibility:collapse" is that it "computes" the space of the hidden rows and the table is formatted accordingly. This means that with "display:none" if the hidden rows are wider, the table changes size when I make them visible. Guess I can fix the size of the columns and adjust the hidden rows so that they fit in it... Still I wait to see if there is a workaround to fix this bug with "visibility:collapse" – Thomas Mar 09 '21 at 16:33