隐藏列时如何保留表格列的宽度？
Posted
技术标签:
【中文标题】隐藏列时如何保留表格列的宽度？【英文标题】：How to retain the width of table columns when hiding columns? 【发布时间】：2019-03-12 05:20:31 【问题描述】：我有一个包含六列的表，其中五列可以根据用户选择隐藏。我遇到的问题是，当隐藏列时，所有其他列都会扩展以填充隐藏列占用的空间。相反，我希望该列隐藏，其余列向左移动，同时保留给定的宽度。我在这里找到的答案似乎都没有解决这个特定问题。
下面是我的 js 和 css 的截图以及屏幕截图。
js:
<table className="hours table table-bordered table-sm" table-layout="fixed">
<thead>
<tr>
<th scope="col"
colSpan="3"
className="row-dow"
>
Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden=this.state.kitchenHoursSame
className="row-16"
>
Kitchen Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden=!this.state.breakfast
className="row-16"
>
Breakfast Special
</th>
...
</tr>
<tr>
<th
scope="col"
// className="row-8 "
>
Day
</th>
<th
scope="col"
className="row-8"
>
Open
</th>
<th
scope="col"
className="row-8"
>
Close
</th>
<th
scope="col"
hidden=this.state.kitchenHoursSame
className="row-8"
>
Open
</th>
<th
scope="col"
hidden=this.state.kitchenHoursSame
className="row-8"
>
Close
</th>
<th
scope="col"
hidden=!this.state.breakfast
className="row-8"
>
1234567890123
</th>
<th
scope="col"
hidden=!this.state.breakfast
className="row-8"
>
End
</th>
...
</tr>
</thead>
<tbody>
this.state.DOW.map((dowList, i) =>
<tr>
<th scope="row" key=dowList.i>dowList.long</th>
<td>
<select name="timeofday"
value=this.state.timeofday
onChange=this.handleInputChange>
<option>
(open)
</option>
</select>
</td>
...
</tr>
)
</tbody>
</table>
css:
.hours
table-layout: fixed;
/* width: 90%; */
width: 1500px;
white-space: nowrap;
.hours td
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.row-dow
width: 20px;
.row-16
width: 16px;
.row-8
width: 8px;
即使有人告诉我不应该使用表格而应该使用其他东西，任何帮助都将不胜感激。
【问题讨论】：
表格宽度是 100% 吗？ 没有。当前为 1500 像素。 .hours 表格布局：固定； /* 宽度：90%； */ 宽度：1500px；空白：nowrap； @IvanBurnaev 说如果你给表格一个宽度，当列被删除时它会保留宽度。 您的表格应该有一个auto 宽度，以便在删除列时缩小。否则，如果表格保持它的大小，内部列将包含所有位置并且宽度会增加。
【参考方案1】：
下面的 sn-p 向您展示了在删除列时不同宽度定义的表格的行为。
window.addEventListener("load", () =>
const firstTDs = Array.from(
document.querySelectorAll("td:nth-child(3)")
).concat(Array.from(document.querySelectorAll("th:nth-child(3)")));
document.querySelector(".remove").addEventListener(
"click",
() =>
firstTDs.forEach(td =>
td.parentNode.removeChild(td);
);
,
once: true
);
);.full-width
width: 100%;
.fixed-width
width: 600px;
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<h5>Auto width</h5>
<table class="tbl mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Full width</h5>
<table class="full-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Fixed width</h5>
<table class="fixed-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Actions</h5>
<button class="remove mdl-button mdl-button--raised">Remove Quantity</button>【讨论】：
【参考方案2】：如果你每次渲染表格内容都没有问题，这可以使用css属性visibility: hidden;来处理，它隐藏了dom中占用空间的元素。 查看：visibilty hidden
方法：
我没有在th 或td 上使用hidden 属性，而是使用了class = hideColumn，它被定义为隐藏元素。
接下来border: none 移除元素的边框。
在你的情况下，你也可以使用 'class' 属性来实现这一点。
如果这没有帮助，请在 cmets 中告诉我，或者是否可以采取任何措施来接近所需的解决方案。
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
.hideColumn
visibility: hidden;
border: none;
h2
font-size: 12px;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>方法2：
只需让文本透明即可。.otherDiv table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
border: 1px solid #dddddd;
.otherDiv .hideColumn
color: transparent;
h2
font-size: 12px;
.otherDiv td, th
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
<div class='otherDiv'>
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>【讨论】：
以上是关于隐藏列时如何保留表格列的宽度？的主要内容，如果未能解决你的问题，请参考以下文章
带有 CSS 媒体标签的隐藏或折叠列的 HTML 表格宽度属性