我正尝试在HTML
中创建具有以下要求的表:
根据此要求,我创建了表格,除最后一个要求外,我还执行了前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>
摘要:如何根据thead
列的宽度拉伸tbody
列的宽度? (在提供的解决方案边界内)
谢谢!
答案 0 :(得分:0)
您需要删除显示块。
.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>