Issues with Locked Header 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.

a jsfiddle would be easier to understand for us – osanger Mar 16 '16 at 15:42 — osanger, Mar 16 '16 at 15:42
@dr_debug, I just added a jsfiddle to the question. – djblois Mar 16 '16 at 16:23 — djblois, Mar 16 '16 at 16:23

osanger · Answer 1 · 2016-03-17T07:59:39.693

0

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.

edited Mar 17 '16 at 07:59

answered Mar 16 '16 at 17:24

osanger

2,276
3
28
35

Thank you dr_debug. That partially fixed the issue. The heading now covers more of the table but it still does not go over the whole table. – djblois Mar 16 '16 at 17:50

Issues with Locked Header CSS

1 Answers1

UPDATE