内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
我怎样才能设置100%宽度的HTML表格,并在tbody内部有垂直滚动条?
table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; }
<table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> <th>Head 5</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> <td>Content 4</td> <td>Content 5</td> </tr> </tbody> </table>
我想避免添加一些额外的div,我想要的是一个简单表,当我试图更改显示时,table-layout
,position
和在css表中的有很多的东西不能正常工作,只有在PX中带固定的宽度才能生效。
我按照以下步骤正确使用pure CSS:
http://tjvantol.com/2012/11/10/Creation-cross-browser-scrollable-tbody/
第一步是将<tbody>
设置为display:block,这样就可以应用溢出和高度。 从那里,<thead>
中的行需要设置为position:relative和display:block,以便它们位于现在可滚动的<tbody>
的顶部。
tbody, thead { display: block; overflow-y: auto; }
因为<thead>
是相对定位的,每个表单元格都需要一个显式宽度。
td:nth-child(1), th:nth-child(1) { width: 100px; } td:nth-child(2), th:nth-child(2) { width: 100px; } td:nth-child(3), th:nth-child(3) { width: 100px; }
但不幸的是这还不够。 当一个滚动条出现的时候,浏览器为它分配空间,因此<tbody>结束的空间比<thead>少。 注意这造成了轻微的错位。
当出现滚动条时,浏览器为其分配空间。<tbody>
结束的空间比<thead>
少,注意这会造成轻微的偏差...
我唯一能找到的解决办法是在所有列上设置一个最小宽度,最后一列除外。
td:nth-child(1), th:nth-child(1) { min-width: 100px; } td:nth-child(2), th:nth-child(2) { min-width: 100px; } td:nth-child(3), th:nth-child(3) { width: 100px; }
以下是完整的代码示例:
CSS:
.fixed_headers { width: 750px; table-layout: fixed; border-collapse: collapse; } .fixed_headers th { text-decoration: underline; } .fixed_headers th, .fixed_headers td { padding: 5px; text-align: left; } .fixed_headers td:nth-child(1), .fixed_headers th:nth-child(1) { min-width: 200px; } .fixed_headers td:nth-child(2), .fixed_headers th:nth-child(2) { min-width: 200px; } .fixed_headers td:nth-child(3), .fixed_headers th:nth-child(3) { width: 350px; } .fixed_headers thead { background-color: #333333; color: #fdfdfd; } .fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 300px; } .fixed_headers tbody tr:nth-child(even) { background-color: #dddddd; } .old_ie_wrapper { height: 300px; width: 750px; overflow-x: hidden; overflow-y: auto; } .old_ie_wrapper tbody { height: auto; }
HTML:
<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. --> <!--[if lte IE 9]> <div class="old_ie_wrapper"> <!--<![endif]--> <table class="fixed_headers"> <thead> <tr> <th>Name</th> <th>Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Pear</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Grape</td> <td>Purple / Green</td> <td>These are purple and green.</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>These are yellow.</td> </tr> <tr> <td>Kiwi</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Plum</td> <td>Purple</td> <td>These are Purple</td> </tr> <tr> <td>Watermelon</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Tomato</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cherry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cantelope</td> <td>Orange</td> <td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td> <td>Green</td> <td>These are green inside.</td> </tr> <tr> <td>Papaya</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Raspberry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Blueberry</td> <td>Blue</td> <td>These are blue.</td> </tr> <tr> <td>Mango</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Passion Fruit</td> <td>Green</td> <td>These are green.</td> </tr> </tbody> </table> <!--[if lte IE 9]> </div> <!--<![endif]-->
编辑:表格宽度100%的替代解决方案(上面实际上是固定宽度的解决方案):
HTML:
<table> <thead> <tr> <th>Name</th> <th>Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Pear</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Grape</td> <td>Purple / Green</td> <td>These are purple and green.</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>These are yellow.</td> </tr> <tr> <td>Kiwi</td> <td>Green</td> <td>These are green.</td> </tr> </tbody> </table>
CSS:
table { width: 100%; text-align: left; min-width: 610px; } tr { height: 30px; padding-top: 10px } tbody { height: 150px; overflow-y: auto; overflow-x: hidden; } th,td,tr,thead,tbody { display: block; } td,th { float: left; } td:nth-child(1), th:nth-child(1) { width: 20%; } td:nth-child(2), th:nth-child(2) { width: 20%; float: left; } td:nth-child(3), th:nth-child(3) { width: 59%; float: left; } /* some colors */ thead { background-color: #333333; color: #fdfdfd; } table tbody tr:nth-child(even) { background-color: #dddddd; }