用HTML和CSS滚动表格
我有一张桌子，里面装满了数据
<table id="products-table" style="overflow-y:scroll" > <thead> <tr> <th>Product (Parent Product)</th> <th>Associated Sites</th> <th>Actions</th> </tr> </thead> <tbody> @for (int i = 0; i < Model.Count(); i++) { <tr> <td> <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br /> </td> <td> <span class="lesser"></span> </td> <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br /> @Html.ActionLink("Associate Site", "Associate", "Products") </td> </tr> } <tr> </tbody> </table> 和CSS一样
#products-table { width: 200px; height: 400px; overflow:scroll; }
但滚动不起作用，我想修复表的高度，如果超过，那么使用滚动条
第一个scheme
<table cellspacing="0" cellpadding="0" border="0" width="325"> <tr> <td> <table cellspacing="0" cellpadding="1" border="1" width="300" > <tr style="color:white;background-color:grey"> <th>Header 1</th> <th>Header 2</th> </tr> </table> </td> </tr> <tr> <td> <div style="width:320px; height:60px; overflow:auto;"> <table cellspacing="0" cellpadding="1" border="1" width="300" > <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> </table> </div> </td> </tr> </table>
结果
这是在所有的浏览器工作
演示jsfiddle http://jsfiddle.net/nyCKE/6302/
第二个scheme
这是只针对您的代码，但它可能与IE9的问题，所以我会build议第一个解决scheme
#products-table { width: 200px; height: 400px; overflow: auto; }
或者带有固定标题的表格
tbody { width: 200px; height: 400px; overflow: auto; }
结果
演示jsfidle http://jsfiddle.net/nyCKE/7588/
只适用于Chrome，但可以适应其他现代浏览器。 表回落到其他brws滚动条通用表。 使用CSS3 FLEX属性。
<table border="1px" class="flexy"> <caption>Lista Sumnjivih vozila:</caption> <thead> <tr> <td>Opis Sumnje</td> <td>Registarski<br>broj vozila</td> <td>Datum<br>Vreme</td> <td>Brzina<br>(km/h)</td> <td>Lokacija</td> <td>Status</td> <td>Akcija</td> </tr> </thead> <tbody> <tr> <td>Osumnjičen tranzit</td> <td>NS182TP</td> <td>23-03-2014 20:48:08</td> <td>11.3</td> <td>Raskrsnica kod pumpe<br></td> <td></td> <td>Prikaz</td> </tr> <tr> <tr> <td>Osumnjičen tranzit</td> <td>NS182TP</td> <td>23-03-2014 20:48:08</td> <td>11.3</td> <td>Raskrsnica kod pumpe<br></td> <td></td> <td>Prikaz</td> </tr> <tr> <tr> <td>Osumnjičen tranzit</td> <td>NS182TP</td> <td>23-03-2014 20:48:08</td> <td>11.3</td> <td>Raskrsnica kod pumpe<br></td> <td></td> <td>Prikaz</td> </tr> <tr> <tr> <td>Osumnjičen tranzit</td> <td>NS182TP</td> <td>23-03-2014 20:48:08</td> <td>11.3</td> <td>Raskrsnica kod pumpe<br></td> <td></td> <td>Prikaz</td> </tr> </tbody> </table>
样式（CSS 3）：
caption { display: block; line-height: 3em; width: 100%; -webkit-align-items: stretch; border: 1px solid #eee; } .flexy { display: block; width: 90%; border: 1px solid #eee; max-height: 320px; overflow: auto; } .flexy thead { display: -webkit-flex; -webkit-flex-flow: row; } .flexy thead tr { padding-right: 15px; display: -webkit-flex; width: 100%; -webkit-align-items: stretch; } .flexy tbody { display: -webkit-flex; height: 100px; overflow: auto; -webkit-flex-flow: row wrap; } .flexy tbody tr{ display: -webkit-flex; width: 100%; } .flexy tr td { width: 15%; }
对于那些想知道如何用多个头来实现Garry解决scheme的人来说，
#wrapper { width: 235px; } table { border: 1px solid black; width: 100%; } th, td { width: 100px; border: 1px solid black; } thead>tr { position: relative; display: block; } tbody { display: block; height: 80px; overflow: auto; }
<div id="wrapper"> <table> <thead> <tr> <th>column1</th> <th>column2</th> </tr> </thead> <tbody> <tr> <td>row1</td> <td>row1</td> </tr> <tr> <td>row2</td> <td>row2</td> </tr> <tr> <td>row3</td> <td>row3</td> </tr> <tr> <td>row4</td> <td>row4</td> </tr> </tbody> </table> </div>
迟到的答案，另一个想法，但很短。
- 把表放入包装div
- 将标题单元格的内容放入div中
- 修复标题内容 ，请参阅CSS
HTML
<div id="scrolltable"> <table> <tr><th><div>first col</div></th><th><div>second</div></th></tr> <tr><td>foo</td><td>bar</td></tr> ... many rows ... </table> </div>
CSS
#scrolltable { margin-top: 20px; height: 200px; overflow: auto; } #scrolltable th div { position: absolute; margin-top: -20px; }
testing小提琴
