javascript - HTML 固定标题 - 将位置 th 与 td 对齐

Question

我创建了一个带有固定标题和滚动条的表格。它工作得很好，但表格标题对齐方式与表格数据不匹配。我的意思是，结果应该是

--------------------
Id Heading2 Heading3
--------------------
 1  value1   value2
 2  value1   value2
 3  value1   value2

但在我的表格中，标题与表格数据不匹配，这意味着标题未正确对齐。这是我的 Fiddle .我试过 padding。但它没有用。那么，请帮助如何对齐标题以匹配相应的列？ JQuery 和 Javascript 解决方案也是可以接受的。

Answer 1

试试这个 css:

 thead >tr,th
    {
       border:none;
       padding:5px 20px 5px 10px;
       text-align: center;
       background-color:#0B3B17; 
       font-size:12pt;
    }
    td
    {
      border:none;
      color:#61210B; 
      text-align: center;
      padding: 3px 5px;
    }
    table
    {
     display: block ;
     height: 100px;
     overflow-y: scroll;
     width:400px;
     background-color: #ddd;
   }