HTML column width changes when table row is hidden

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.

score 5 · Answer 1 · answered Jan 21 '19 at 16:52

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>

score 4 · Answer 2 · answered Nov 15 '19 at 08:42

4

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.

answered Nov 15 '19 at 08:42

Reino Wis

73
4

This is perfect, for me. – Lambda Apr 06 '20 at 11:48

score 2 · Answer 3 · answered Mar 31 '16 at 09:46

2

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

answered Mar 31 '16 at 09:46

LM358

141
9

Robin Maben · Answer 4 · 2012-05-04T09:05:15.913

0

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>

edited May 04 '12 at 09:05

answered May 04 '12 at 05:52

Robin Maben

22,194
16
64
99

Hi Robin, thanks for your suggestion. I already tried putting fixed width in each td element, as you will see in my HTML. Following your suggestion I added the !important, but I doidn't see any change. Instead of absolute pixel values, I also tried giving the width in % as you have said, but that also did not make any difference. By the way, I am using Chrome. – newbie1967 May 04 '12 at 06:49
Tried adding and also. No change. – newbie1967 May 04 '12 at 10:40
Hmmm.. I'm out of guesses at the moment. Upvoting this question. Hope somebody else can tell what's missing. – Robin Maben May 04 '12 at 10:56

score 0 · Answer 5 · answered Sep 28 '12 at 16:10

0

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.

answered Sep 28 '12 at 16:10

George

11
1

HTML column width changes when table row is hidden

5 Answers5