Как двигать ногами вверху?

Abdus Sattar Bhuiyan спросил: 03 ноября 2018 в 08:39 в: html

У меня есть следующая таблица:

как вы можете видеть, есть поля ввода с каждым столбцом внизу. Я хочу переместить это вершина. то есть: сразу после HTML-кода <thead> </thead>.

(базовая структура таблицы, в которой предполагается разделять только 2 строки):

<table class="table table-striped table-hover" id="sample_5">
   <thead>
      <tr>
         <th>
            Rendering engine
         </th>
         <th>
            Browser
         </th>
         <th>
            Platform(s)
         </th>
         <th>
            Engine version
         </th>
         <th>
            CSS grade
         </th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>
            Rendering engine
         </th>
         <th>
            Browser
         </th>
         <th>
            Platform(s)
         </th>
         <th>
            Engine version
         </th>
         <th>
            CSS grade
         </th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>
            Trident
         </td>
         <td>
            Internet Explorer 4.0
         </td>
         <td>
            Win 95+
         </td>
         <td>
            4
         </td>
         <td>
            X
         </td>
      </tr>
      <tr>
         <td>
            Trident
         </td>
         <td>
            Internet Explorer 5.0
         </td>
         <td>
            Win 95+
         </td>
         <td>
            5
         </td>
         <td>
            C
         </td>
      </tr>
   </tbody>
</table>

Сначала я пытаюсь создать комнату под thead следующим образом:

table.dataTable {
    margin-top: 84px !important;
    position: relative;
}
thead {
    position: absolute;
    top: -89px;
    display: table-header-group;
}

Комната создается так, как я ожидал, но ширина каждой ячейки thead была изменена, как показано на следующем рисунке :

Есть идеи?


0 ответов