Как выровнять ширину столбца заголовка таблицы и столбца тела таблицы?

Question

Я пытаюсь создать таблицу со следующими требованиями в 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 столбцов? (в предоставленных границах решения)

Заранее спасибо!

Answer 1

Вам необходимо удалить блок дисплея.

.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>