固定表頭不佔用全屏

我想修復我的表頭。我從StackOverflow's Answer之一找到了答案，但是，我在使用該代碼時遇到了問題。我想要用百分比指定標題大小，以便當用戶放大/縮小頁面時，表格會調整它自己。固定表頭不佔用全屏

在此代碼中，當標題大小與表數據行不匹配時。如果我在CSS中註釋掉position標記，那麼標題將自己與表數據行對齊，但它使它成爲非固定標題。有些人可以幫助獲取標題與表格數據行對齊並佔據整個屏幕（以不同標題指定的大小，並且相應的數據行可以有不同的寬度）。

<style type="text/css"> 
table 
{ 
    width:100%; 
    border:1px solid #000000; 
} 
thead 
{ 
    background-color:#000268; 
    color:#FFFFFF; 
    text-align:center; 
    position:fixed; 
    top:0px; 
    width:100%; 
} 
thead th 
{ 
    text-align:center; 
    border-width: 1px; 
    border-style: outset; 
} 
thead.th.hd1 
{ 
    width:20% 
    text-align:center; 
    border-width: 1px; 
    border-style: outset; 
} 
tbody { 
    color:#000000; 
    text-align:center; 
    height:150px; 
    overflow: scroll; 
    margin:0px; 
    width:100%; 
} 
tbody td 
{ 
    height:60px; 
    width:100px; 
    border-width: 1px; 
    border-style: outset; 
} 
</style> 
<table> 
<thead> 
<tr><th class = "hd1">Head1</th><th class = "hd1">Head2</th><th class = "hd1">Head3</th><th class = "hd1">Head4</th><th class = "hd1">Head5</th><th class = "hd1">Head6</th></tr> 
</thead> 
<tbody> 
<tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td></tr> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> 
</tbody> 
</table>

來源

2013-05-30 sarbjit

儘量把你的代碼中的jsfiddle – Abhimanyu

這麼多細胞..我的眼睛 – George

下面是一個工作示例：
我不能使它與THEAD和TBODY標籤的工作，所以我有兩個簡單的表做到了。

<!DOCTYPE html> 
<html> 
<head> 
<!-- After some testing, this code seems to work fine both in IE 10 and Firefox 21 
z-index is suported in IE 8 and should work if you use a !DOCTYPE declaration--> 
<style type="text/css"> 
#space 
{ 
position: fixed; 
z-index: 51; 
width: 99%; 
height: 30px; 
background-color: #FFFFFF; 
margin: 0px; 
margin-top: -10px; 
} 
#tblheader 
{ 
position: fixed; 
z-index: 52; 
width:99%; 
border:1px solid #000000; 
border-style: outset; 
text-align:center; 
color:#FFFFFF; 
background-color:#000268; 
margin-top: 20px; 
padding: 0px; 
} 
#tblbody 
{ 
position: absolute; 
z-index: 50; 
width:99%; 
border:1px solid #000000; 
border-style: outset; 
text-align:center; 
line-height: 1em; 
margin-top: 85px; 
padding: 0px; 
overflow: auto; 
} 
#tblbody tr 
{ 
min-height: 15px; 
height: auto; 
padding: 0px; 
} 
body 
{ 
height: 3000px; 
} 
#tblheader tr 
{ 
height: 60px; 
} 
td 
{ 
width: 16%; 
height: 40px; <!-- Here you can set the minimum height of the row --> 
border-width: 1px; 
border-style: outset; 
text-align:center; 
word-wrap: break-word; 
} 

</style> 
</head> 
<body> 
<div id="space">&nbsp;</div> 
<table id="tblheader"> 
<tr><td>Head1</td><td>Head2</td><td>Head3</td><td>Head4</td><td>Head5</td><td>Head6</td></tr> 
</table> 
<table id="tblbody"> 
<tr><td>r1c1 other text that is automaticaly wrapped/the cell height increases automatically/other text that is automaticaly wrapped/the cell height increases automatically</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td></tr> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> <!-- I have copied some rows for test purposes --> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> 
</table> 
</body> 
</html>

來源

2013-05-31 05:09:52 Gimmy

謝謝，它的工作。 – sarbjit

只有一個問題：如何讓我的第一列成爲更大的尺寸。我在第一個標題的「td」上添加了'id'，並在CSS中添加爲'tblheader.td.abc {width：30％; height：40px; <！ - 在這裏你可以設置行的最小高度 - > border-width：1px; border-style：outset; text-align：center; 自動換行：斷字; }'。但它似乎並不奏效。感謝您幫助實現不同大小的標題。 – sarbjit

你只能通過＃標識符來調用一個標籤（例如#abc）; .abc表示您正在調用將類設置爲abc的標記。你可以使用.tblheader td #abc，但你也可以簡單的使用#abc。下面我已經把一個完整的代碼放在第二個表的第一列第一個單元格中添加了#def id的地方，所以它的排列方式與表1相同。 – Gimmy

這裏是你想要什麼副本：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#space 
{ 
position: fixed; 
z-index: 51; 
width: 99%; 
height: 30px; 
background-color: #FFFFFF; 
margin: 0px; 
margin-top: -10px; 
} 
#tblheader 
{ 
position: fixed; 
z-index: 52; 
width:99%; 
border:1px solid #000000; 
border-style: outset; 
text-align:center; 
color:#FFFFFF; 
background-color:#000268; 
margin-top: 20px; 
padding: 0px; 
} 
#tblbody 
{ 
position: absolute; 
z-index: 50; 
width:99%; 
border:1px solid #000000; 
border-style: outset; 
text-align:center; 
line-height: 1em; 
margin-top: 85px; 
padding: 0px; 
overflow: auto; 
} 
#tblbody tr 
{ 
min-height: 15px; 
height: auto; 
padding: 0px; 
} 
body 
{ 
height: 3000px; 
} 
#tblheader tr 
{ 
height: 60px; 
} 
td 
{ 
width: 14%; 
height: 40px; 
border-width: 1px; 
border-style: outset; 
text-align:center; 
word-wrap: break-word; 
} 

#abc, 
#def 
{ 
width: 30%; 
height: 40px; 
border-width: 1px; 
border-style: outset; 
text-align:center; 
word-wrap: break-word; 
} 

</style> 
</head> 
<body> 
<div id="space">&nbsp;</div> 
<table id="tblheader"> 
<tr><td id="abc">Head1</td><td>Head2</td><td>Head3</td><td>Head4</td><td>Head5</td><td>Head6</td></tr> 
</table> 
<table id="tblbody"> 
<tr><td id="def">r1c1 other text that is automaticaly wrapped/the cell height increases automatically/other text that is automaticaly wrapped/the cell height increases automatically</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td></tr> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> 
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr> 
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr> 
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr> 
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr> 
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr> 
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr> 
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr> 
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr> 
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr> 
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr> 
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr> 
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr> 
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr> 
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr> 
</table> 
</body> 
</html>

來源

2013-06-01 13:18:19 Gimmy

您只能通過其標識＃符號（例如#abc） – Gimmy

注意我已將第一列設置爲30％。其餘列的寬度除以它們的數量（99％ - 30％）/（6-1）=〜14％。如果要分別設置每列的寬度，則需要爲表格的第一行中的每個單元格分配id，並設置每列的寬度，以使寬度的總和最大可達99％。 – Gimmy

非常感謝您的幫助！ – sarbjit

固定表頭不佔用全屏

回答

相關問題