1
A
回答
2
function reposHead(e) {
var h = document.getElementById('headscroll');
h.scrollLeft = e.scrollLeft;
var f = document.getElementById('divfrozen');
f.scrollTop = e.scrollTop;
}
function reposHorizontal(e) {
var h = document.getElementById('headscroll');
var c = document.getElementById('contentscroll');
h.scrollLeft = e.scrollLeft;
c.scrollLeft = e.scrollLeft;
var sh = document.getElementById('hscrollpos');
sh.innerHTML = e.scrollLeft;
var ch = document.getElementById('contentwidth');
var ic = document.getElementById('innercontent');
ch.innerHTML = ic.clientWidth; //c.scrollWidth;
var ch2 = document.getElementById('contentheight');
ch2.innerHTML = ic.clientHeight; //c.scrollWidth;
var sp = document.getElementById('scrollwidth');
sp.innerHTML = e.scrollWidth;
}
function reposVertical(e) {
var h = document.getElementById('divfrozen');
var c = document.getElementById('contentscroll');
h.scrollTop = e.scrollTop;
c.scrollTop = e.scrollTop;
var sh = document.getElementById('vscrollpos');
sh.innerHTML = e.scrollTop;
var ch = document.getElementById('contentheight');
ch.innerHTML = c.scrollHeight;
var sp = document.getElementById('scrollheight');
sp.innerHTML = e.scrollHeight;
}table.main
{
width: 700px;
height: 221px;
table-layout: fixed;
}
table.root
{
table-layout: fixed;
}
table.content
{
table-layout: fixed;
width: 1890px;
}
table.head
{
table-layout: fixed;
width: 1890px;
}
table.frozen
{
table-layout: fixed;
}
td
{
line-height: 28px;
}
div.horizontal-scroll
{
width: 703px;
height: 22px;
overflow: hidden;
overflow-x: scroll;
border: solid 1px #666;
}
div.horizontal-scroll div
{
width: 2173px;
height: 1px;
}
div.vertical-scroll
{
height: 227px;
width: 22px;
overflow: hidden;
overflow-y: scroll;
border: solid 1px #666;
}
div.vertical-scroll div
{
height: 377px;
width: 1px;
}
td.inner
{
border-left: 1px solid #666;
border-bottom: 1px solid #666;
padding: 3px;
height: 28px;
}
td.frozencol
{
border-right: 1px double #666;
width: 200px;
}
td.col1
{
border-left: none;
width: 100px;
}
td.bottomcol
{
/*border-bottom: 1px solid #666;*/
}
.col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10
{
width: 200px;
overflow: hidden;
text-overflow: ellipses;
white-space: nowrap;
}
td.head
{
/*border-bottom: 1px solid #666;*/
background-color: #efefef;
border-top: 1px solid #666;
}
.rightcol
{
border-right: 1px solid #666;
}
.toprow
{
border-top: 0px;
}
div.root
{
margin-left: 0px;
overflow: hidden;
width: 200px;
height: 28px;
border-bottom: 1px solid #666;
}
div.frozen
{
overflow: hidden;
width: 200px; /*border-bottom: 1px solid #666;*/
height: 200px;
}
div.divhead
{
overflow: hidden;
height: 28px;
width: 500px;
border-left: 1px solid #666;
border-right: 1px solid #666; /*border-bottom: 0px solid #666;*/
border-bottom: 1px solid #666;
}
div.content
{
overflow: hidden;
width: 500px;
height: 200px;
border-left: 1px solid #666;
border-right: 1px solid #666; /*border-bottom: 1px solid #666;*/
}
td.tablefrozencolumn
{
width: 200px;
border-right: 3px solid #666;
}
td.tablecontent
{
width: 501px;
}
td.tableverticalscroll
{
width: 24px;
}
div.ff-fill
{
height: 23px;
width: 23px;
background-color: #ccc;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" class='main'>
<tr>
<td class='tablefrozencolumn'>
<div id='divroot' class='root'>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class='root'>
<tr>
<td class='inner frozencol colwidth head'>
Head0
</td>
</tr>
</table>
</div>
<div id='divfrozen' class='frozen'>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class='frozen'>
<tr>
<td class='inner frozencol toprow'>
Col0Row2
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row3
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row4
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row5
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row6
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row7
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row8
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row9
</td>
</tr>
<tr>
<td class='inner frozencol'>
Col0Row10
</td>
</tr>
<tr>
<td class='inner frozencol bottomcol rightcol'>
Col1Row11
</td>
</tr>
</table>
</div>
</td>
<td class='tablecontent'>
<div id='headscroll' class='divhead'>
<table border="0" cellpadding="0" cellspacing="0" class='head'>
<tr>
<td class='inner col1 head'>
Head 1
</td>
<td class='inner col2 head'>
Head 2
</td>
<td class='inner col3 head'>
Head 3
</td>
<td class='inner col4 head'>
Head 4
</td>
<td class='inner col5 head'>
Head 5
</td>
<td class='inner col6 head'>
Head 6
</td>
<td class='inner col7 head'>
Head 7
</td>
<td class='inner col8 head'>
Head 8
</td>
<td class='inner col9 head'>
Head 9
</td>
<td class='inner col10 head rightcol'>
Head 10
</td>
</tr>
</table>
</div>
<div id='contentscroll' class='content' onscroll='reposHead(this);'>
<table border="0" cellpadding="0" cellspacing="0" class='content' id='innercontent'>
<tr>
<td class='inner col1 toprow'>
Col1Row2
</td>
<td class='inner col2'>
Col2Row2
</td>
<td class='inner col3'>
Col3Row2
</td>
<td class='inner col4'>
Col4Row2
</td>
<td class='inner col5'>
Col5Row2
</td>
<td class='inner col6'>
Col6Row2
</td>
<td class='inner col7'>
Col7Row2
</td>
<td class='inner col8'>
Col8Row2
</td>
<td class='inner col9'>
Col9Row2
</td>
<td class='inner col10 rightcol'>
Col10Row2
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row3
</td>
<td class='inner'>
Col2Row3
</td>
<td class='inner'>
Col3Row3
</td>
<td class='inner'>
Col4Row3
</td>
<td class='inner'>
Col5Row3
</td>
<td class='inner'>
Col6Row3
</td>
<td class='inner'>
Col7Row3
</td>
<td class='inner'>
Col8Row3
</td>
<td class='inner'>
Col9Row3
</td>
<td class='inner rightcol'>
Col10Row3
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row4
</td>
<td class='inner'>
Col2Row4
</td>
<td class='inner'>
Col3Row4
</td>
<td class='inner'>
Col4Row4
</td>
<td class='inner'>
Col5Row4
</td>
<td class='inner'>
Col6Row4
</td>
<td class='inner'>
Col7Row4
</td>
<td class='inner'>
Col8Row4
</td>
<td class='inner'>
Col9Row4
</td>
<td class='inner rightcol'>
Col10Row4
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row5
</td>
<td class='inner'>
Col2Row5
</td>
<td class='inner'>
Col3Row5
</td>
<td class='inner'>
Col4Row5
</td>
<td class='inner'>
Col5Row5
</td>
<td class='inner'>
Col6Row5
</td>
<td class='inner'>
Col7Row5
</td>
<td class='inner'>
Col8Row5
</td>
<td class='inner'>
Col9Row5
</td>
<td class='inner rightcol'>
Col10Row5
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row6
</td>
<td class='inner'>
Col2Row6
</td>
<td class='inner'>
Col3Row6
</td>
<td class='inner'>
Col4Row6
</td>
<td class='inner'>
Col5Row6
</td>
<td class='inner'>
Col6Row6
</td>
<td class='inner'>
Col7Row6
</td>
<td class='inner'>
Col8Row6
</td>
<td class='inner'>
Col9Row6
</td>
<td class='inner rightcol'>
Col10Row6
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row7
</td>
<td class='inner'>
Col2Row7
</td>
<td class='inner'>
Col3Row7
</td>
<td class='inner'>
Col4Row7
</td>
<td class='inner'>
Col5Row7
</td>
<td class='inner'>
Col6Row7
</td>
<td class='inner'>
Col7Row7
</td>
<td class='inner'>
Col8Row7
</td>
<td class='inner'>
Col9Row7
</td>
<td class='inner rightcol'>
Col10Row7
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row8
</td>
<td class='inner'>
Col2Row8
</td>
<td class='inner'>
Col3Row8
</td>
<td class='inner'>
Col4Row8
</td>
<td class='inner'>
Col5Row8
</td>
<td class='inner'>
Col6Row8
</td>
<td class='inner'>
Col7Row8
</td>
<td class='inner'>
Col8Row8
</td>
<td class='inner'>
Col9Row8
</td>
<td class='inner rightcol'>
Col10Row8
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row9
</td>
<td class='inner'>
Col2Row9
</td>
<td class='inner'>
Col3Row9
</td>
<td class='inner'>
Col4Row9
</td>
<td class='inner'>
Col5Row9
</td>
<td class='inner'>
Col6Row9
</td>
<td class='inner'>
Col7Row9
</td>
<td class='inner'>
Col8Row9
</td>
<td class='inner'>
Col9Row9
</td>
<td class='inner rightcol'>
Col10Row9
</td>
</tr>
<tr>
<td class='inner col1'>
Col1Row10
</td>
<td class='inner'>
Col2Row10
</td>
<td class='inner'>
Col3Row10
</td>
<td class='inner'>
Col4Row10
</td>
<td class='inner'>
Col5Row10
</td>
<td class='inner'>
Col6Row10
</td>
<td class='inner'>
Col7Row10
</td>
<td class='inner'>
Col8Row10
</td>
<td class='inner'>
Col9Row10
</td>
<td class='inner rightcol'>
Col10Row10
</td>
</tr>
<tr>
<td class='inner col1 bottomcol'>
Col1Row11
</td>
<td class='inner bottomcol'>
Col2Row11
</td>
<td class='inner bottomcol'>
Col3Row11
</td>
<td class='inner bottomcol'>
Col4Row11
</td>
<td class='inner bottomcol'>
Col5Row11
</td>
<td class='inner bottomcol'>
Col6Row11
</td>
<td class='inner bottomcol'>
Col7Row11
</td>
<td class='inner bottomcol'>
Col8Row11
</td>
<td class='inner bottomcol'>
Col9Row11
</td>
<td class='inner bottomcol rightcol'>
Col10Row11
</td>
</tr>
</table>
</div>
</td>
<td class='tableverticalscroll' rowspan="2">
<div class='vertical-scroll' onscroll='reposVertical(this);'>
<div>
</div>
</div>
<div class='ff-fill'>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class='horizontal-scroll' onscroll='reposHorizontal(this);'>
<div>
</div>
</div>
</td>
</tr>
</table>
</div>
</form>相關問題
- 1. 如何使GWT Datagrid的第一列固定並且水平和垂直滾動
- 2. 滾動水平和垂直
- 3. 水平和垂直可滾動表格固定標題
- 4. Android-固定標題水平和垂直滾動表
- 5. 固定磁貼水平和垂直滾動表
- 6. 表TD固定的，垂直和水平滾動
- 7. 垂直和水平滾動不工作
- 8. 水平滾動和垂直滾動
- 9. 垂直滾動和水平滾動
- 10. 垂直和水平滾動表
- 11. 垂直滾動和水平頁面表
- 12. 垂直 - 帶固定列的水平滾動HTML表格
- 13. 水平滾動時保持表格的一列固定，但也垂直滾動
- 14. 固定頭同時滾動水平以及垂直
- 15. td，th的水平和垂直滾動應該固定
- 16. 帶粘性/固定頭的水平和垂直響應表？
- 17. 在UITableview中水平和垂直滾動
- 18. 如何使用水平和垂直滾動移動表中的列具有固定頭
- 19. LWUIT水平列表滾動垂直滾動垂直窗體
- 20. 如何使表滾動水平與固定的第一和最後一列
- 21. 如何在android中水平和垂直滾動表格佈局
- 22. 如何製作水平滾動但垂直固定的單行集合視圖？
- 23. 的CSS位置固定的水平滾動而滾動垂直
- 24. 在列表視圖中的垂直和水平滾動
- 25. Android：水平和垂直滾動recyclerview
- 26. UIScrollView策略水平和垂直滾動
- 27. malihu水平和垂直滾動
- 28. EditText水平和垂直滾動
- 29. Android：水平和垂直滾動recyclerview
- 30. Uiscrollview水平和垂直滾動
謝謝！這很好... –