tbodyは左から右にスクロールしますが、スレッドは表示されません

Question

ユーザーがtbodyをスクロールすると、左から右へスクロールするようにしました。 私はまた、彼らが見えない場合に隠されるべきthを表示しないようにtheadが必要です。

私はCSSのオーバーフローを試みましたが、これが正しい方法であるかどうかわかりません。 テーブルに使用する完全なCSSを次に示します。

私はこれで1週間以上執着しています。だから私は尋ねると思った

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

私はテーブルの周り

Answer 2

あなたはあなたの興味深い問題があります。しかし、私はそれがCSSを使用することによってのみ解決することはできないと信じています。

私があなたの場合は、JavaScriptを使用してボディのオフセット（スクローリングによってどれくらいのピクセルが隠されているか）を確認してから、同じオフセットを頭にかけようとします。ヘッドのコンテンツの動的絶対配置を使用してください。

これは単なるヒントですが、私はC＃アプリケーションで同様のことをしています。