表格列与表格标题均匀显示

Question

我的表格标题与表格的行显示不均匀。

喜欢这张照片：

对不起，图片上的名字是我的母语（波兰语），但我希望您能明白。

如何使标题和行与表格的其余部分均匀显示？

下面，我将为此表发布HTML和CSS：

CSS：

.hid{
    display: none;
    overflow:hidden;
    visibility: hidden;
}
.kol{
    width: 100%;
    display: inline;
    padding: 20px;
    text-align: justify;

    border-style: solid;
    border: deepskyblue;
}
.nagl{

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #167F92;



}
.row{
   /* display: table-row;*/
    display:table;
    table-layout: fixed;
    width:100%;
}
td:empty { display: none; }

表格标题的HTML：

<div class="nagl" id="nago">
<table class="row">
    <tr >

        <th  class=' kol'>id</th>
        <th  class=' kol '>pesel</th>
        <th  class=' kol'>numer dowodu</th>
        <th  class=' kol'>imie</th>
        <th class=' kol'>nazwisko</th>
        <th  class=' kol'>data urodzenia</th>
        <th  class=' kol'>adres</th>


    </tr>
</table>

对于表格本身：

  <table>
   <tr class='row'>
       <th  class=' hid '><input   type='radio' name='rad' value='nie_wybrany' onclick='wyb_rekord() '></th>
       <td   class='  kol'>{{id}}</td>
       <td  class='  kol'>{{pesel}}</td>
       <td   class='  kol'>{{nr_dowodu}}</td>
       <td   class='  kol'>{{imie}}</td> 
       <td  class='  kol'>{{nazwisko}}</td>
       <td  class='   kol'>{{formatDate data_urodzenia  'short'}}</td>
       <td   class='  kol'>{{adres}} </td>


   </tr>
 </table>

我正在使用javascript和把手动态填充表格

Answer 1

为什么我们需要为表头和表的实际数据部分有2个单独的表。我们可以通过使用内置标签轻松实现这一目标。

{{1}}

Answer 2

我更改了CSS类：

testevent

并且我已将此块添加到我的CSS中：

 .nagl{


    background-color: #167F92;
    top: 100px;
    position: fixed;
    padding: 20px;

   }

效果如下：