html - tbody 从左向右滚动但不是 thead

Question

我需要让 thead 在用户滚动 tbody 时从左向右滚动。 如果它们不在 View 中，我还需要 thead 不显示应该隐藏的 th。

我试过 css overflow 但我不确定这是否是正确的方法。 这是我用于表格的完整 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;
}

Answer 1

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