当用户滚动tbody时，我需要使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;
}