今天小编跟大家讲解下有关css固定表头、行头样式代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css固定表头、行头样式代码 的相关资料,希望小伙伴们看了有所帮助。
复制代码代码如下: <style type="text/css"> <!-- body,table, td, a {font:9pt;} .scrollRowThead{position: relative; left: expression(this.parentElement.parentElement .parentElement.parentElement.scrollLeft); z-index:0;} .scrollColThead {position: relative; top: expression(this.parentElement.parentElement .parentElement.scrollTop); z-index:2;} .scrollCR { z-index:3;} .scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE; OVERFLOW: scroll;width: 320px; } .scrollColThead td,.scrollColThead th { text-align: center ;} .scrollRowThead,.scrollColThead td,.scrollColThead th {background-color:EEEEEE;} .scrolltable{ border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } .scrolltable td,.scrollTable th{ border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; } --> </style> <h1>利用CSS代码让Table产生固定表头</h1> <h3>www.865171.cn</h3> <div id="scrollDiv"class="scrollDiv"> <table border="0"cellpadding="3"cellspacing="0"width="400"class="scrollTable"> <tr class="scrollColThead"> <th class="scrollRowThead scrollCR"> </th> <th colspan="2">列头</th> <th colspan="2">列头</th> </tr> <tr class="scrollColThead"> <th class="scrollRowThead scrollCR">h1</th> <th >h2</th> <th >h3</th> <th >h4</th> <th >h5</th> </tr> <tr> <td class="scrollRowThead"> <input type="checkbox"name="checkbox"value="checkbox"> a</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td class="scrollRowThead"> <input type="checkbox"name="checkbox2"value="checkbox"> b</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td nowrap class="scrollRowThead"> <input type="checkbox"name="checkbox3"value="checkbox"> c</td> <td nowrap>单元格2</td> <td nowrap>单元格3</td> <td nowrap>单元格4</td> <td nowrap>单元格5</td> </tr> <tr> <td class="scrollRowThead"> <input type="checkbox"name="checkbox4"value="checkbox"> d</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td class="scrollRowThead"> <input type="checkbox"name="checkbox5"value="checkbox"> e</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td class="scrollRowThead"> <input type="checkbox"name="checkbox6"value="checkbox"> f</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td class="scrollRowThead"> <input type="checkbox"name="checkbox7"value="checkbox"> g</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> </table> </div>来源:爱蒂网