Issues with Locked Header CSS - css

Question

I have some tables in my HelpDesk software that I wanted to lock the headers. I found this:
Scrollable table with fixed header in bootstrap
I have edited the CSS and HTML and it's working where the header does lock in to place. However, I have 2 issues that I can't figure out. First, the header row will not span the complete width of the table. Second, the final column which is a note column, I want to make larger than the rest of the columns. Here is my 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%;
}
}
Here is a jsfiddle for the code: Header Locking not working fully
and here is a picture of what it currently looks like:
As you can see in the CSS, I have tried to create one column which is wider (called .notesColumn) and it has not done anything.

Answer 1

have a look at:
https://jsfiddle.net/t4zwsrdw/10/
your the th needs a width, because it's display block and floating.
.TicketLists th {
float: left;
width: 12.2%;
text-align:left;
}
UPDATE
.notesColumn {
width: 49.8% !important;
}
Make your .noteColumn wider and add the class to the last th:
<th class="notesColumn">
Opening Note
</th>
https://jsfiddle.net/t4zwsrdw/12/
this version has the header above the whole table.