Locked Header CSS的问题

Question

我的HelpDesk软件中有一些表，我想锁定标题。我发现了这个：
Scrollable table with fixed header in bootstrap

我已经编辑了CSS和HTML，并且它已经在标题锁定到位的地方工作。但是，我有2个问题我无法弄清楚。首先，标题行不会跨越表的整个宽度。第二，最后一列是一个注释列，我想比其他列更大。这是我的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%;
  }
}

以下是代码的jsfiddle：Header Locking not working fully

以下是目前的情况：

正如您在CSS中看到的，我尝试创建一个更宽的列（称为.notesColumn）并且它没有做任何事情。

Answer 1

看看：

https://jsfiddle.net/t4zwsrdw/10/

你需要一个宽度，因为它的显示块和浮动。

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

更新

.notesColumn {
    width: 49.8% !important;
}

让你的.noteColumn更宽，并将课程添加到最后一个：

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

https://jsfiddle.net/t4zwsrdw/12/

此版本的标题高于整个表格。