当用户滚动tbody时,我想让thead从左向右滚动。 如果他们不在视野中,我还需要thead不要显示应隐藏的内容。
我试过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;
}
答案 0 :(得分:1)
我回答了自己的问题,要做我想做的事情,我需要在桌子周围创建一个DIV溢出框
答案 1 :(得分:0)
你有一个有趣的问题。但是,我认为只有使用CSS才能解决它。
如果我是你,我会尝试通过使用JavaScript然后将相同的偏移量放到头部来抵消身体的偏移(通过scrooling隐藏多少像素)。尝试使用头部内容的动态绝对定位。
这只是一个提示,但我已经在c#应用程序中看到了类似的东西并且它有效。