隐藏表格行时 HTML 列宽发生变化
Posted
技术标签:
【中文标题】隐藏表格行时 HTML 列宽发生变化【英文标题】:HTML column width changes when table row is hidden 【发布时间】:2012-05-13 16:10:27 【问题描述】:我是网络编程的新手,所以我可能在这里犯了一些明显的错误。
当我试图从 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" 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 像素。如果有可用空间,则每个单元格中的数据向左移动,并且最后一列(在本例中为第三列)使用了额外的空间。
如您所见,以下帖子很有帮助,但并没有完全解决我的问题。 Hiding table rows without resizing overall width
欢迎任何帮助。
【问题讨论】:
【参考方案1】:希望这可以帮助那些正在努力解决同样问题的人。
我没有使用display: none;
,而是使用visibility: collapse;
作为隐藏行。这仍然保持列的宽度和整个布局。
【讨论】:
这对我来说是完美的。【参考方案2】:问题在于您用于使表格行可见的显示类型。 要隐藏表格行,请使用 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>
【讨论】:
【参考方案3】:我遇到了同样的问题:我试图通过 elem.style.display="none"
隐藏一列,但再次显示时布局被破坏。这种显示风格对我有用:
columns.item(i).style.display = "table-cell";
【讨论】:
【参考方案4】:始终固定列的宽度。那会是你的问题吗?
.myTable td width:33% !important;
理想情况下,您还应该使用thead
和tbody
将标题和正文部分括起来
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>
【讨论】:
嗨罗宾,感谢您的建议。我已经尝试在每个 td 元素中放置固定宽度,正如您将在我的 HTML 中看到的那样。按照您的建议,我添加了!important,但我没有看到任何变化。如您所说,我还尝试以百分比形式给出宽度,而不是绝对像素值,但这也没有任何区别。顺便说一句,我正在使用 Chrome。 尝试添加 和 也。没有变化。 嗯..我现在没有猜测了。赞成这个问题。希望其他人能说出缺少什么。 【参考方案5】:我也有同样的问题。我在每张桌子上扔了一个跨度,看看我是否可以强制宽度,它似乎工作。虽然很丑。
【讨论】:
以上是关于隐藏表格行时 HTML 列宽发生变化的主要内容,如果未能解决你的问题,请参考以下文章