带有固定标题的可滚动表格

我在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时也遇到同样的问题，仍然有他们与其他语言......你做得越多，它变得越容易。 –

带有固定标题的可滚动表格

回答

相关问题