Geek asks and answers

HTML column width changes when table row is hidden

I am a relative newbie to web programming, so I probably make some obvious mistakes here.

When I try to hide a row in a table from javascript, for example rows [i] .style.display = 'none', the table layout is completely destroyed. Initially, the contents of the cell were wrapped, and the width of the table became more and more compressed. Then I added style = "table-layout: fixed" in the table tag and style = "white-space: nowrap" in each td. This stopped line wrapping, but the content was not line-aligned. Cells began to move to the left if the space and width of the column varied from one row to another. Then I added a fixed width to each of the th and td elements, as well as to the div containing the table. Nevertheless, 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>

, , 100, 50 150 . , , , 100, 50 150, . , 300 px. , , , .

, , .

.

+5
4

: elem.style.display="none", . :

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

+1

. ?

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

thead tbody

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

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

. , , , , . , .

0

The problem is the type of display that you use to make the table row visible.
To hide the table row, use display = "none"
To show the table row, use display = "table-row"
I made a pattern so you can see them 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>
Run codeHide result
0
source

More articles:


All Articles