我想强制我的 HTML 表格具有宽度,方法是只为每一列设置宽度。
我现在拥有的是下面的代码。我删除了一些不适用的其他代码。它没有正确溢出,表格仅在我屏幕的 100% 宽度处呈现。
#example_table {
border-collapse: collapse;
table-layout: fixed;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
overflow-x: scroll;
overflow-y: visible;
width: 100%;
}
<div class="zui-wrapper">
<div class="zui-scroller">
<table id="example_table">
<thead>
<tr>
<th style="width: 75px;">Col1</th>
<th style="width: 50px;">Col2</th>
<th style="width: 200px;">Col3</th>
<th style="width: 70px;">Col4</th>
<th style="width: 70px;">Col5</th>
<th style="width: 70px;">Col6</th>
<th style="width: 70px;">Col7</th>
<th style="width: 100px;">Col8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ex1</td>
<td>Ex2</td>
<td>Ex3</td>
<td>Ex4</td>
<td>Ex5</td>
<td>Ex6</td>
<td>Ex7</td>
<td>Ex8</td>
</tr>
</tbody>
</table>
</div>
</div>
我还尝试将 width="xx"添加到每一行。我不想在 #example_table CSS 下使用 width="xx",因为我有一个隐藏某些行的 javascript 代码,完成后,表格示例的宽度相同。
我还在不同的类/ID 中尝试了许多不同的溢出 CSS 组合。非常感谢任何帮助!
最佳答案
您可以使用 <colgroup>
以精确列的宽度。
这是一个例子:
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
border-style: solid;
border-width: 1px;
}
.tg th {
padding: 10px 5px;
border-style: solid;
border-width: 1px;
}
<table class="tg" style="undefined;table-layout: fixed; width: 700px">
<colgroup>
<col style="width: 75px">
<col style="width: 50px">
<col style="width: 200px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 100px">
</colgroup>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
<tr>
<td>Ex1</td>
<td>Ex2</td>
<td>Ex3</td>
<td>Ex4</td>
<td>Ex5</td>
<td>Ex6</td>
<td>Ex7</td>
<td>Ex8</td>
</tr>
</table>
关于html - 通过仅具有 <td width> 强制 HTML 表格宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58050966/