[英]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.