帶有固定標題的可滾動表格

我在PHP/HTML/CSS中搜索了一些解決方案，但目前爲止沒有任何工作，可能是因爲這些示例中的大部分都是很多代碼，所以我迷失了它。有人可以向我解釋我需要做什麼或者在這裏放一些簡單的示例代碼嗎？帶有固定標題的可滾動表格

2012-10-24 Michal S

Language is being？ –

PHP，對不起..或者HTML/CSS可能已經足夠:) –

我試過這個http://www.imaputz.com/cssStuff/bigFourVersion.html#但我完全沒有明白，沒有解釋，我不知道我需要什麼代碼部分。我試圖實現這些CSS塊到我的代碼，但它只是完全打破了表。 –

此代碼（取自您評論中的鏈接）是您需要的基本代碼。下一次，你需要弄清楚這種事情，只要刪除代碼段來查看什麼是中斷，然後將所有不會破壞你需要的東西排除在外。

<html> 
<head> 
<style> 
div.tableContainer { 
    clear: both; 
    border: 1px solid #963; 
    height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */ 
    overflow: auto; 
    width: 756px /* Remember to leave 16px for the scrollbar! */ 
} 

html>body tbody.scrollContent { 
    display: block; 
    height: 262px; 
    overflow: auto; 
    width: 100% 
} 


html>body thead.fixedHeader tr { 
    display: block 
} 

html>body thead.fixedHeader th { /* TH 1 */ 
    width: 200px 
} 

html>body thead.fixedHeader th + th { /* TH 2 */ 
    width: 240px 
} 

html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */ 
    width: 316px 
} 

html>body tbody.scrollContent td { /* TD 1 */ 
    width: 200px 
} 

html>body thead.scrollContent td + td { /* TD 2 */ 
    width: 240px 
} 

html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */ 
    width: 316px 
} 
</style> 
</head> 
<body> 

<div id="tableContainer" class="tableContainer"> 
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable"> 
    <thead class="fixedHeader"> 
     <tr class="alternateRow"> 
      <th><a href="#">Header 1</a></th> 
      <th><a href="#">Header 2</a></th> 
      <th><a href="#">Header 3</a></th> 
     </tr> 
    </thead> 
    <tbody class="scrollContent"> 
     <tr class="normalRow"> 
      <td>Cell Content 1</td> 
      <td>Cell Content 2</td> 
      <td>Cell Content 3</td> 
     </tr> 
     <tr class="alternateRow"> 
      <td>More Cell Content 1</td> 
      <td>More Cell Content 2</td> 
      <td>More Cell Content 3</td> 
     </tr> 
     ......... 
    </tbody> 
</table> 
</div> 
</body> 
</html>

來源

2012-10-25 05:19:57

非常感謝！我花了這麼多時間，沒有結果:)這樣就更容易理解代碼:) –

不用擔心，幾年前學習HTML/CSS/JS時也遇到同樣的問題，仍然有他們與其他語言......你做得越多，它變得越容易。 –

帶有固定標題的可滾動表格

回答

相關問題