HTML table表头固定
说说我在最近项目中碰到的css问题吧:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table tbody { display: block; height: 200px; overflow-y: scroll; } table thead, table tbody tr { display: table; width: 100%; table-layout: fixed; text-align: center; } thead th, tbody td { width: 50px; } table thead { width: calc( 100% - 1em); } </style> </head> <body> <div style="width: 800px;"> <div class="table-head"> <table align="center"> <thead> <tr> <th>序号</th> <th>内容</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>我只是用来测试的</td> </tr> <tr> <td>2</td> <td>我只是用来测试的</td> </tr> <tr> <td>3</td> <td>我只是用来测试的</td> </tr> <tr> <td>4</td> <td>我只是用来测试的</td> </tr> <tr> <td>5</td> <td>我只是用来测试的</td> </tr> <tr> <td>6</td> <td>我只是用来测试的</td> </tr> <tr> <td>7</td> <td>我只是用来测试的</td> </tr> <tr> <td>8</td> <td>我只是用来测试的</td> </tr> </tbody> </table> </div> </div> </body> </html>
顺便做做笔记说说px、em、rem的区别:
px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于em和rem的区别一句话概括:em相对于父元素大小,rem相对于根元素大小(html元素)。
rem中的r意思是root(根源),这也就不难理解了。
em/rem:用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。