tbody scrolling left to right but not the thead

Question

I ned to make the thead scroll left to right when the user scrolls the tbody. I also need the thead to not show the th that should be hidden if they are not in view.

I tried css overflow but iam not sure if this is the correct way. Here is the full CSS I use for the table.

I have been stuck on this for over a week now. So thought I would ask

table{
height:300px;
width:980px;
overflow:scroll;
}

#dowithleads, #dowithleads table, thead, #dowithleads tbody{
    float:left;
    width:980px;
    min-height:40px;
    margin-top:10px;
    -webkit--radius: 8px;
    -moz--radius: 8px;
    -radius: 8px;
    /*background:url("../images/ie/formareabg.png") repeat;*/
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dddddd));
    background: -webkit-linear-gradient(#ffffff, #dddddd);
    background: -moz-linear-gradient(#ffffff, #dddddd);
    background: -ms-linear-gradient(#ffffff, #dddddd);
    background: -o-linear-gradient(#ffffff, #dddddd);
    background: linear-gradient(#ffffff, #dddddd);
    behavior:url(-radius.htc);
}
tr{
    width:100%;
}
td,th{
  cellspacing:0;
  min-width: 100px;
  border-bottom:thin solid #999;
  line-height:40px;
  min-height:40px;
padding-right:5px;
}

th{
line-height:normal;
}



tbody td{
  line-height:30px;
  min-height:40px;
  margin:0 5px;
}

.bigger, .companysize{
    min-width:200px;
    max-width:200px;
}


tbody tr{
    float:left;
    :thin solid #999;
    -webkit--radius: 8px;
    -moz--radius: 8px;
    -radius: 8px;
    background:url("../images/manage.body.jpg") repeat;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dddddd));
    background: -webkit-linear-gradient(#ffffff, #dddddd);
    background: -moz-linear-gradient(#ffffff, #dddddd);
    background: -ms-linear-gradient(#ffffff, #dddddd);
    background: -o-linear-gradient(#ffffff, #dddddd);
    background: linear-gradient(#ffffff, #dddddd);
    behavior:url(-radius.htc);
    -bottom:none;
}

thead{
    color:#fff;
    margin:0;
    background:url("../images/manage.black.jpg") repeat;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#333333));
      /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #666666, #333333);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #666666, #333333);
      /* IE 10 */
    background: -ms-linear-gradient(top, #666666, #333333);
      /* Opera 11.10+ */
    background: -o-linear-gradient(top, #666666, #333333);
}


tbody{
    font-size:12px;
    margin:0;
    background:#fff;
    -bottom:thin solid #999;
}

th.small, td.small{
    min-width:40px;
    width:40px;
    max-width:40px;
}

tr.leadone{
    color:#000;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#006699));
      /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #0099FF, #006699);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #0099FF, #00669);
      /* IE 10 */
    background: -ms-linear-gradient(top, #0099FF, #00669);
      /* Opera 11.10+ */
    background: -o-linear-gradient(top, #0099FF, #00669);
}

tr.leadred{
    color:#000;
    background-image: linear-gradient(bottom, rgb(255,81,0) 0%, rgb(255,204,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(255,81,0) 0%, rgb(255,204,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(255,81,0) 0%, rgb(255,204,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(255,81,0) 0%, rgb(255,204,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(255,81,0) 0%, rgb(255,204,0) 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,81,0)),
    color-stop(1, rgb(255,204,0))
);
} 

.last{
    :none;
}

.page-number, .view-all{
color:#fff;
-webkit--radius: 8px;
-moz--radius: 8px-radius: 8px;
background:#000;
margin:3px;
min-width:30px;
min-height:30px;
line-height:30px;
float:left;
background:url("../images/manage.black.jpg") repeat;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#333333));
  /* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #666666, #333333);
  /* Firefox 3.6+ */
background: -moz-linear-gradient(top, #666666, #333333);
  /* IE 10 */
background: -ms-linear-gradient(top, #666666, #333333);
  /* Opera 11.10+ */
background: -o-linear-gradient(top, #666666, #333333);
}

#searchbox{
float:right;
width:250px;
text-align:left;
}
#manageleads{
    float:left;
    width:900px;
}

.ui-state-active{
background:url("../images/manage.active.jpg") repeat;
}

button.manage{
font-size:16px;
width:160px;
float:left;
}

.clickable{
cursor:pointer;
cursor:hand;
margin:0 4px;
}


html>body div.tableContainer {
    overflow: hidden;
    width: 756px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
    float: left;
    width: 740px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
    width: 756px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
    position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
    display: block
}



/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    color: #FFF;
    display: block;
    text-decoration: none;
    width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
    color: #FFF;
    display: block;
    text-decoration: underline;
    width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
    display: block;
    height: 380px;
    overflow: auto;
    max-width: 980px;
}

table#manageleads{
width:980px;
height:400px;
overflow:scroll;
}

.ui-datepicker-calendar{
width:300px;
max-width:300px;
}

Answer 1

I answered my own question, to do what I wanted to do I needed to create a DIV overflow box around the table

Answer 2

You have got an interesting problem of yours. However, I believe that it can not be solved only by using CSS.

If I were you I would try to get offset of the body (how much pixels are hidden by the scrooling) by using JavaScript and then make the same offset to head. Try to use dynamic absolute positioning of head's content.

It's just a hint but I have seen something similar done in c# application and it worked.