锁定头CSS的问题

我的帮助台软件中有一些表，我想锁定标题。我找到了这个：

我已经编辑了CSS和HTML，它在标题锁定的地方工作。然而，我有两个问题无法解决。首先，标题行不会跨越表格的整个宽度。第二，最后一列是注释列，我想使其比其他列大。这是我的CSS：

.formatTable tr:nth-child(odd) {
  background-color:lightgray
}
.hoverTable tr:hover {
  background-color: #ffff99;
  cursor:pointer;
}
/*.hoverTable tr:first-child:hover {
background-color: #0c268d;
cursor:default;
}*/
.formatTable tr:first-child {
  background-color: #0c268d;
  font-weight: normal;
  color:white;
}
th {
  white-space: nowrap;
}
@media screen and (min-width:361px)
{
  table.TicketLists {
    width: 100%;
  }
  .TicketLists thead, tbody, tr, td, th { 
    display: block;
  }
  .TicketLists tr:after {
    content: ' ';
    display: block;
    clear: both;
  }
  .TicketLists tbody {
    height: 600px;
    overflow-y: auto;
  }
  .TicketLists tbody td {
    width: 12.2%;
    float: left;
  }
  .TicketLists th {
    float: left;
  }
  .notesColumn {
    width: 22%;
  }
}

下面是代码的JSFIDLE：

下面是它目前的样子：

正如您在CSS中所看到的，我试图创建一个更宽的列（称为

.notesColumn

），但它没有做任何事情

看看：

您的th需要一个宽度，因为它是显示块和浮动的

   .TicketLists th {
    float: left;
    width: 12.2%;
    text-align:left;
}

更新 将您的

.note列

加宽，并将类添加到最后一列：

<th class="notesColumn">
        Opening Note
</th>

开场白

此版本的标题位于整个表格上方。

请查看：

您的th需要一个宽度，因为它是显示块和浮动的

   .TicketLists th {
    float: left;
    width: 12.2%;
    text-align:left;
}

更新 将您的

.note列

加宽，并将类添加到最后一列：

<th class="notesColumn">
        Opening Note
</th>

开场白

---

这个版本的标题位于整个表的上方。

jsfiddle更容易理解us@dr_debug，我只是在问题中添加了一个JSFIDLEus@dr_debug，我刚刚在问题中添加了一个JSFIDLE。谢谢dr_debug。这部分地解决了这个问题。标题现在覆盖了表格的更多部分，但仍然没有覆盖整个表格。谢谢dr_debug。这部分地解决了这个问题。标题现在覆盖了表格的更多部分，但仍然没有覆盖整个表格。