表格表头固定,内容多时滚动内容
程序员文章站
2022-07-12 09:19:06
...
不多写废话了,都在代码注释中
<html> <head> <style type="text/css"> * { margin: 0; padding: 0; } /*所有内容都在这个DIV内*/ .all { width: 100%; border: 1px solid #000000; } /*表头在这个DIV内*/ .title { width: 500px; /*这个宽度需要与下面的内容的DIV相等*/ } /*表格样式*/ table { width: 100%; /*撑满上面定义的500像素*/ border: 1px solid #FF00FF; border-collapse: collapse; /*边线与旁边的合并*/ table-layout:fixed; } /*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/ table tr th { border: 1px solid #FF00FF; overflow: hidden; /*超出长度的内容不显示*/ /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/ word-break: break-all; /*字内断开*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符*/ white-space: nowrap; } /*单元格样式*/ table tr td { border: 1px solid #FF00FF; overflow: hidden; /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/ word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } /*容纳表格内容的DIV,这个DIV上放置滚动条*/ .content { width: 100%; height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/ overflow: scroll; /*总是显示滚动条*/ } /*真正存放内容的DIV*/ .content div { width: 500px; /*与表头的DIV宽度相同*/ } </style> </head> <body> <div class="all"> <div class="title"> <table> <tr> <th style="width:10%">Operate</th> <th style="width:20%">Date</th> <th style="width:25%">Acknowledge</th> <th style="width:15%">Other1</th> <th style="width:15%">Other2</th> <th>Other3</th> </tr> </table> </div> <div class="content"> <div> <table> <tr> <td style="width:10%">Operate</td> <td style="width:20%">Date</td> <td style="width:25%">Acknowledge</td> <td style="width:15%">Other1</td> <td style="width:15%">Other2</td> <td>Other3</td> </tr> <tr> <td>Operate</td> <td>Date</td> <td>Acknowledge</td> <td>Other21</td> <td>Other22</td> <td>Other3</td> </tr> <tr> <td>Operate</td> <td>Date</td> <td>Acknowledge</td> <td>Other31</td> <td>Other32</td> <td>Other3</td> </tr> <tr> <td>Operate</td> <td>Date</td> <td>Acknowledge</td> <td>Other41</td> <td>Other42</td> <td>Other3</td> </tr> <tr> <td>Operate</td> <td>2011-12-12 12:22:34 9987</td> <td>Acknowledge</td> <td>Other51</td> <td>Other52</td> <!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个--> <td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td> </tr> </table> </div> </div> </div> </body> </html>