我有一个包含六列的表格,其中五列可以根据用户选择隐藏。我遇到的问题是,当一个列被隐藏时,所有其他列都会扩展以填充隐藏列占用的空间。相反,我想要发生的是该列仅隐藏,其余列向左移动,同时保留给定的宽度。我在这里找到的答案似乎都没有解决这个特定问题。
下面是我的 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;
}
即使被告知我不应该使用表格而应该使用其他东西,我们也将不胜感激。
最佳答案
下面的代码片段向您展示了不同宽度定义的表格在删除列时的行为。
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>
关于css - 隐藏列时如何保持表格列的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52686985/