[英]HTML column width changes when table row is hidden
我是网络编程的新手,所以我可能在这里犯了一些明显的错误。
当我试图从 javascript 中隐藏表格中的一行时,如rows[i].style.display = 'none',表格布局完全被破坏了。 最初,单元格内容被包裹,表格宽度正在缩小。 然后我在表格标签中添加了 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 像素。 如果有可用空间,则每个单元格中的数据将向左移动,并且额外的空间被最后一列(在本例中为第三列)使用。
如您所见,以下帖子很有帮助,但并没有完全解决我的问题。 隐藏表格行而不调整整体宽度
任何帮助将是最受欢迎的。
希望这可以帮助那些正在努力解决同样问题的人。 而不是使用display: none;
我使用了visibility: collapse;
对于隐藏的行。 这仍然保持列的宽度和整个布局。
问题在于您用来使表格行可见的显示类型。
要隐藏表格行,请使用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>
我遇到了同样的问题:我试图通过elem.style.display="none"
隐藏一列,但是当再次显示时,布局被破坏了。 这种显示风格对我有用:
columns.item(i).style.display = "table-cell";
始终固定列的宽度。 这会是你的唯一问题吗?
.myTable td{ width:33% !important; }
理想情况下,您还应该使用thead
和tbody
将 header 和 body 部分括起来
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>
我有同样的问题。 我在每张桌子里面扔了一个跨度,看看我是否可以强制宽度,它似乎有效。 虽然很丑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.