表头固定(宽度不一致)
<html dir="ltr" lang="zh-CN"><head> <meta charset="utf-8"> <title>纯CSS实现表头固定</title> <style type="text/css"> #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的border,只有内部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*统一设置两个table为细线表格*/ } #scrollTable table.thead{ /*表头*/ /*div的第一个子元素*/ width:100%; } #scrollTable table.thead th{/*表头*/ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黄色*/ } #table_body,#table_head{/*能带滚动条的表身*/ /*div的第二个子元素*/ width:100%; height:200px; overflow:auto;/*必需*/ } #table_head{/*能带滚动条的表身*/ /*div的第二个子元素*/ wid/*th:100%; height:200px; ove*/rflow:auto;/*必需*/ } #table_head{ width:100%; margin-top: 0px; height:200px; overflow:hidden;/*必需*/ } #scrollTable table.tbody{/*能带滚动条的表身的正体*/ width:100%; border: 1px solid #C96; border-right:#B74; color:#666666; background: #ECE9D8; } #scrollTable table.tbody td{/*能带滚动条的表身的格子*/ border:1px solid #C96; } </style> </head> <body> <div id="scrollTable"> <div id="table_head"> <table class="thead" > <thead> <tr> <th>名称</th> <th>语法</th> <th>说明</th> <th>例子</th> </tr> </thead> <tbody > <tr> <td>Simple attribute Selector</td> <td>[attr] </td> <td>aaaaaaaaa</td> <td>blockquote[title] { <br>color: red }</td> </tr> <tr> <td>attribute Value Selector</td> <td>[attr="value"] </td> <td>bbbbbbbb</td> <td>h2[align="left"] { <br>cursor: hand } </td> </tr> <tr> <td>"Begins-with" attribute Value Selector</td> <td>[attr^="value"] </td> <td>cccc</td> <td>h2[align^="right"] { <br>cursor: hand } </td> </tr> <tr> <td>"Ends-with" attribute Value Selector</td> <td>[attr$="value"] </td> <td>ddd</td> <td>div[class$="vml"]{<br>cursor: hand} </td> </tr> <tr> <td>Substring-match attribute Value Selector</td> <td>[attr*="value"] </td> <td>44444rr</td> <td>div[class*="grid"]{<br> float:left} </td> </tr> <tr> <td>One-Of-Many Attribute Value Selector</td> <td>[attr~="value"] </td> <td>3fsdfa</td> <td>li[class~="last"]{<br> padding-left:2em} </td> </tr> <tr> <td>Hyphen Attribute Value Selector</td> <td>[attr|="value"] </td> <td>hhhhhhhhhhhh</td> <td>span[lang|="en"]{ <br>color:green}</td> </tr> <tr> <td>kkkkkkkk</td> <td>[attr!="value"] </td> <td>l</td> <td>span[class!="red"]{<br>color:green}</td> </tr> </tbody> </table> </div> <div id="table_body"> <table class="tbody" > <tbody> <tr> <td>Simple attribute Selector</td> <td>[attr] </td> <td>aaaaaaaaa</td> <td>blockquote[title] { <br>color: red }</td> </tr> <tr> <td>attribute Value Selector</td> <td>[attr="value"] </td> <td>bbbbbbbb</td> <td>h2[align="left"] { <br>cursor: hand } </td> </tr> <tr> <td>"Begins-with" attribute Value Selector</td> <td>[attr^="value"] </td> <td>cccc</td> <td>h2[align^="right"] { <br>cursor: hand } </td> </tr> <tr> <td>"Ends-with" attribute Value Selector</td> <td>[attr$="value"] </td> <td>ddd</td> <td>div[class$="vml"]{<br>cursor: hand} </td> </tr> <tr> <td>Substring-match attribute Value Selector</td> <td>[attr*="value"] </td> <td>44444rr</td> <td>div[class*="grid"]{<br> float:left} </td> </tr> <tr> <td>One-Of-Many Attribute Value Selector</td> <td>[attr~="value"] </td> <td>3fsdfa</td> <td>li[class~="last"]{<br> padding-left:2em} </td> </tr> <tr> <td>Hyphen Attribute Value Selector</td> <td>[attr|="value"] </td> <td>hhhhhhhhhhhh</td> <td>span[lang|="en"]{ <br>color:green}</td> </tr> <tr> <td>kkkkkkkk</td> <td>[attr!="value"] </td> <td>l</td> <td>span[class!="red"]{<br>color:green}</td> </tr> </tbody> </table> </div> </div> </body> <script type="text/javascript"> let table_head = document.getElementById('table_head'); let table_body = document.getElementById('table_body'); table_body.style.marginTop = -(table_body.clientHeight-25) let boday_last_width = table_head.children[0].children[0].children[0].children[0].style.width table_head.children[0].children[0].children[0].children[0].style.width = boday_last_width+15 </script> </html>
编程改变生活
posted on 2021-07-01 15:43 coding-farmer 阅读(92) 评论(0) 编辑 收藏 举报