隐藏表格行时 HTML 列宽会发生变化

Question

I am a relative newcomer to web programming, so probably I am making some obvious mistake here.

When I am trying to hide a row in a table from javascript like rows[i].style.display = 'none', the table layout is getting completely broken. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the th and td element and also to the div containing the table. Still the problem remained.

My current HTML is something like the following.

---

<div style="width: 300px">
  <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow">
      <th style="width: 100px;">Header 1</th>
      <th style="width: 50px;">Header 2</th>
      <th style="width: 150px;">Header 3</th>
    </tr>
    <tr id="DetailRow1">                                        
      <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
      <td style="white-space:nowrap; width: 50px;">Data 1_2  in Row 1</td>
      <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
    </tr>
    <tr id="DetailRow2">                                        
      <td style="white-space:nowrap; width: 100px;">Data 2</td>
      <td style="white-space:nowrap; width: 50px;">Data 2</td>
      <td style="white-space:nowrap; width: 150px;">Data 2</td>
    </tr>
    <tr id="DetailRow3">                                        
      <td style="white-space:nowrap; width: 100px;">Data 3_1</td>
      <td style="white-space:nowrap; width: 50px;">Data 3_2</td>
      <td style="white-space:nowrap; width: 150px;">Data 3_3</td>
    </tr>
  </table>
</div>

---

When the table is displayed first time, the columns are aligned properly, with width 100, 50 and 150 px respectively. But if a row, say the second one is hidden, the cell width of the remaining two displayed rows are no longer fixed at 100, 50 and 150 and data is no longer aligned vertically. Please note that the overall table width remains 300 px. Data in each cell moves left if there is available space and the additional space is used by the last, in this case, third column.

The following post was helpful but did not solve my problem fully, as you can see. Hiding table rows without resizing overall width

Any help will be most welcome.

Answer 1

Hope this could help who are struggling with the same problem. Instead of using display: none; I used visibility: collapse; for the hidden rows. This still keeps the width of the columns and the whole layout.

Answer 2

The problem is the display type that you use to make the table-row visible.
To hide a table-row use display="none"
To show a table-row use display="table-row"
I did a sample so you can see these in action.

 function show(){ document.getElementById('trB').style.display='table-row'; } function hide(){ document.getElementById('trB').style.display='none'; }

 @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"); table{ border: 1px solid #ccc; }

 <table id="myTable" class="table table-striped table-hover"> <thead> <tr> <td>#</td> <td>Letter</td> </tr> </thead> <tbody> <tr id="trA"> <td>1</td> <td>A</td> </tr> <tr id="trB"> <td>2</td> <td>B</td> </tr> <tr id="trC"> <td>3</td> <td>C</td> </tr> </tbody> </table> <button id="showB" onclick="show()">show B</button> <button id="hideB" onclick="hide()">hide B</button>

Answer 3

I had the same problem: I tried to hide a column by elem.style.display="none" but when showing again the layout was broken. This display-style worked for me:

columns.item(i).style.display = "table-cell";

Answer 4

Always fix the width of your columns. Would that sole your problem?

.myTable td{ width:33% !important; }

Ideally, you should also enclose header and body sections using thead and tbody

<table>
  <thead>
    <tr> ... </tr>
  </thead>

  <tbody> 
    .  
    .      
    .
  </tbody>
</table>

Answer 5

I'm having the same problem. I threw a span inside of each table to see if I could force the width and it seems to work. It's ugly though.