近日看到CSS PLAY网站上的实例vertical scrolling tables--使用两个报表的嵌套，达到固定显示区域大小，并可以利用纵向滚动条阅读更多的条目。刚巧新年到来，正希望对公司的内部网站做些更新，不妨照单全收，现学现用。

XHTML代码：

1. < div id="info" >
2. < table class="tableone" summary="Container" >
3. < caption >News< /caption >
4. < thead >
5. < tr >
6. < th class="th1" scope="col" >< /th >
7. < th class="th2" scope="col" >Date< /th >
8. < th class="th3" scope="col" >Title< /th >
9. < /tr >
10. < /thead >
11. < tfoot >
12. < tr >
13. < td colspan="3" >Last Modified:2006-01-01< /td >
14. < /tr >
15. < /tfoot >
16. < tbody >
17. < tr >
18. < td colspan="3">
19. < div class="innerb" >
20. < table class="tabletwo" summary="News" >
21. < tbody >
22. < tr >
23. < td class="td1" >< img alt="icon" src="p.gif"/ >< /td>
24. < td class="td2" >2006-01-01< /td >
25. < td class="td3" >< a href="#" >News< /a >< /td >
26. < /tr >
27. < /tbody >
28. < /table >
29. < /div >
30. < /td >
31. < /tr >
32. < /body >
33. < /table >
34. < /div >

所有内容被"info"层包围，并横向居中显示。

第一个Table类名为"tableone"，是一个容器。通过使用thead和tfoot标签，使表头和表尾固定显示。

第二个Table类名为"tabletwo"，并嵌套在第一个Table的tbody标签中，用于显示新闻列表。这个Table放置在"innerb"层中，由于"innerb"层有固定的高度，所以当条目超过限定高度时，就会出现滚动条用于翻阅新闻。

CSS代码：

1. #info {
2. margin: 10px auto;
3. background: rgb(255, 255, 255) none repeat;
4. width: 650px;
5. text-align: left;
6. }
7. .innerb {
8. overflow: auto;
9. height: 20em;
10. }

接下来的工作就是如何美化这个页面了。更多细节请参看实例。

Technorati Tags: XHTML, CSS