7

我是网络编程的新手，所以我可能在这里犯了一些明显的错误。

当我试图从像 rows[i].style.display = 'none' 这样的 javascript 中隐藏表格中的一行时，表格布局完全被破坏了。最初，单元格内容被包裹，表格宽度被缩小。然后我在表格标签中添加了 style="table-layout:fixed" 并在每个 td 中添加了 style="white-space:nowrap"。这停止了​​换行，但内容仍然没有在一行上对齐。如果空间和列宽从一行到另一行不同，则单元格开始向左移动。然后，我为每个 th 和 td 元素以及包含表格的 div 添加了一个固定宽度。问题仍然存在。

我当前的 HTML 类似于以下内容。 

<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 像素。如果有可用空间，则每个单元格中的数据向左移动，并且最后一列（在本例中为第三列）使用了额外的空间。

如您所见，以下帖子很有帮助，但并没有完全解决我的问题。 隐藏表格行而不调整整体宽度

任何帮助都将受到欢迎。

4

5 回答 5

4

希望这可以帮助那些正在努力解决同样问题的人。而不是使用display: none;我用于visibility: collapse;隐藏行。这仍然保持列的宽度和整个布局。

于 2019-11-15T08:42:39.887 回答
3

问题是您用来使表格行可见的显示类型。
要隐藏表格行，请使用display="none"
要显示表格行，请使用display="table-row"
我做了一个示例，以便您可以看到这些操作。

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>

于 2019-01-21T16:52:49.873 回答
2

我遇到了同样的问题：我试图隐藏一列，elem.style.display="none"但再次显示时布局被破坏。这种显示风格对我有用：

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

于 2016-03-31T09:46:54.530 回答
0

始终固定列的宽度。这会解决你的问题吗？

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

thead理想情况下，您还应该使用and将标题和正文部分括起来tbody

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

  <tbody> 
    .  
    .      
    .
  </tbody>
</table>
于 2012-05-04T05:52:40.540 回答
0

我有同样的问题。我在每张桌子上扔了一个跨度，看看我是否可以强制宽度，它似乎工作。虽然很丑。

于 2012-09-28T16:10:44.713 回答