Html t车斗从左向右滚动，但不是THAD

当用户滚动tbody时，我需要使thead从左向右滚动。 我还需要THAD不显示th，如果它们不在视野内，则应隐藏th

我尝试了css溢出，但我不确定这是否是正确的方法。 下面是我用于表格的完整CSS

这件事我已经坚持了一个多星期了。所以我想我会问

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;
}

---

你有一个有趣的问题。不过，我相信单靠CSS是不能解决这个问题的

如果我是你，我会尝试使用JavaScript获取身体的偏移量（通过旋转隐藏了多少像素），然后对头部进行相同的偏移。尝试使用头部内容的动态绝对定位

---

这只是一个提示，但我在c#应用程序中看到了类似的操作，它起到了作用。

我回答了自己的问题，要做我想做的事情，我需要在桌子周围创建一个DIV溢出框