争怎路由网：是一个主要分享无线路由器安装设置经验的网站，汇总WiFi常见问题的解决方法。

纯CSS完成表头固定的代码示例

时间：2022-11-8作者：未知来源：争怎路由网人气：

="en"]{ <br/>color:green}</td> </tr> <tr> <td>反选属性值选择器</td> <td>[attr!="value"] </td> <td>非标准，jQuery中出现的</td> <td>span[class!="red"]{<br/>color:green}</td> </tr> </tbody> </table> </p> </p>

表现层部分：

#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
 
#scrollTable table.thead{ /*表头*/
  /*p的第一个子元素*/
  width:100%;
}
 
#scrollTable table.thead th{/*表头*/
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
 
#scrollTable p{/*能带滚动条的表身*/
  /*p的第二个子元素*/
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
}
 
#scrollTable table.tbody{/*能带滚动条的表身的正体*/
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
#scrollTable table.tbody td{/*能带滚动条的表身的格子*/
  border:1px solid #C96;
}
运行代码：
<!doctype html>
<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{ /*表头*/
        /*p的第一个子元素*/
        width:100%;
      }

      #scrollTable table.thead th{/*表头*/
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }

      #scrollTable p{/*能带滚动条的表身*/
        /*p的第二个子元素*/
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
      }

      #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>
    <p id="scrollTable">
      <table class="thead">
      
        <tbody>
          <tr>
            <th>名称</th>
            <th>语法</th>
            <th>说明</th>
            <th>例子</th>
          </tr>
        </tbody>
      </table>
      <p>
        <table class="tbody">
       
          <tbody>
            <tr>
              <td>Simple attribute Selector</td>
              <td>[attr] </td>
              <td>选择具有此属性的元素</td>
              <td>blockquote[title] { <br/>color: red }</td>
            </tr>
            <tr>
              <td>attribute Value Selector</td>
              <td>[attr="value"] </td>
              <td>选出属性值精确等于给出值的元素</td>
              <td>h2[align="left"] { <br/>cursor: hand } </td>
            </tr>
            <tr>
              <td>"Begins-with" attribute Value Selector</td>
              <td>[attr^="value"] </td>
              <td>选出属性值以给出值开头的元素</td>
              <td>h2[align^="right"] { <br/>cursor: hand } </td>
            </tr>
            <tr>
              <td>"Ends-with" attribute Value Selector</td>
              <td>[attr$="value"] </td>
              <td>选出属性值以给出值结尾的元素</td>
              <td>p[class$="vml"]{<br/>cursor: hand} </td>
            </tr>
            <tr>
              <td>Substring-match attribute Value Selector</td>
              <td>[attr*="value"] </td>
              <td>选出属性值包含给出值的元素</td>
              <td>p[class*="grid"]{<br/> float:left} </td>
            </tr>
            <tr>
              <td>One-Of-Many Attribute Value Selector</td>
              <td>[attr~="value"] </td>
              <td>原元素的属性值为多个单词，给出值为其中一个。</td>
              <td>li[class~="last"]{<br/> padding-left:2em} </td>
            </tr>
            <tr>
              <td>Hyphen Attribute Value Selector</td>
              <td>[attr  
关键词：纯CSS完成表头固定的代码示例



Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明：本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除，敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版