如何对齐表标题列和表主体列的宽度?

时间:2019-07-01 10:00:24

标签: html css html-table

我正尝试在HTML中创建具有以下要求的表:

  • 应该可以滚动(垂直和水平)
  • 它应该具有固定的标题列
  • 不应该自动换行
  • 所有列的宽度应为过继的(与内容的左侧对齐)
  • 如果表格的宽度小于100%,则最后一列应延伸到右侧。
  • 标题列的宽度应与数据列的宽度相同

根据此要求,我创建了表格,除最后一个要求外,我还执行了前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列的宽度? (在提供的解决方案边界内)

谢谢!

1 个答案:

答案 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>