我正在尝试在 HTML
中创建一个具有以下要求的表格:
- 应该可以滚动(垂直和水平)
- 它应该有固定的标题栏
- 它不应该自动换行
- 所有列的宽度应该是自适应的(与内容的左侧对齐)
- 如果表格的宽度小于 100%,则最后一列应向右拉伸(stretch)。
- 标题列的宽度应与数据列的宽度相同
根据这个要求,我创建了表,除了最后一个,我还做了前 5 个要求。
我的例子:
.TableViewer table
{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.TableViewer table tbody
{
display: block;
width: 100%;
overflow: auto;
height: 400px;
}
.TableViewer table thead tr
{
display: block;
}
.TableViewer table thead
{
background: rgb(191, 191, 191);
}
.TableViewer table th
{
padding: 0 5px;
text-align: center;
font-family: monospace;
white-space: nowrap;
border: 1px solid rgb(153, 153, 153);
}
.TableViewer table td
{
padding: 0 5px;
text-align: left;
font-family: monospace;
white-space: nowrap;
border: 1px solid rgb(153, 153, 153);
}
.TableViewer table td:last-child {
width: 100%;
}
<div class="TableViewer">
<table>
<thead>
<tr><th>index</th><th>time</th><th>data</th></tr>
</thead>
<tbody>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
</tbody>
</table>
</div>
总结:如何根据tbody
列宽拉伸(stretch)thead
列宽? (在提供的解决方案边界内)
提前致谢!
最佳答案
您需要移除显示 block 。
.TableViewer table
{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.TableViewer table tbody
{
width: 100%;
overflow: auto;
height: 400px;
}
.TableViewer table thead
{
background: rgb(191, 191, 191);
}
.TableViewer table th
{
padding: 0 5px;
text-align: center;
font-family: monospace;
white-space: nowrap;
border: 1px solid rgb(153, 153, 153);
}
.TableViewer table td
{
padding: 0 5px;
text-align: left;
font-family: monospace;
white-space: nowrap;
border: 1px solid rgb(153, 153, 153);
}
.TableViewer table td:last-child {
width: 100%;
}
<div class="TableViewer">
<table>
<thead>
<tr><th>index</th><th>time</th><th>data</th></tr>
</thead>
<tbody>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
<tr><td>nnnnnn</td><td>hh:mm:ss dd/mm/yyyy </td><td>[some data]</td></tr>
</tbody>
</table>
</div>
关于html - 如何对齐表头列和表体列的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56833655/