表头固定（宽度不一致） 

<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  阅读(119)  评论(0)    收藏  举报

导航