html 表格head部分不动 body部分滚动，格宽同增长

<style>

.table{    width: 100%;    border-collapse:collapse;    border-spacing:0;}

.table thead{display: block; width: 100%; background: #ddd;} .table tbody{display: block; height:70px; overflow: auto; width: 100%; border: 1px solid #ddd;} .table td,.table th { width: 200px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } .table tr{ border-bottom: 1px solid #B74; } </style>

<table class="table">
                <thead>
                <tr>
                    <th>header</th>
                    <th>header two</th>
                    <th>header two</th>
                    <th>header two</th>
                    <th>header two</th>
                    <th>header two</th>
                </tr>
                </thead>
                <tbody class="M_scrollBar">
                <tr>
                    <td>fuck 1</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                </tr>
                <tr>
                    <td>fuck 1</td>
                    <td>fuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>k 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                </tr>
                <tr>
                    <td>fuck 1</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                </tr>
                <tr>
                    <td>fuck 1</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                    <td>fuck 2</td>
                </tr>
                </tbody>
            </table>

时间： 2024-10-09 12:00:50

html 表格head部分不动 body部分滚动，格宽同增长的相关文章

jQuery操作表格，table tr td，单元格

jQuery操作表格,table tr td,单元格乔乐共享jQuerytable单元格表格最终效果图: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>

使用jquery合并表格中相同文本的相邻单元格

一.效果二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

【web开发】☆★之利用POI操作Excel表格系列教程【9】单元格边框处理

[web开发]☆★之利用POI操作Excel表格系列教程[9]单元格边框处理 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellStyle; import org.a

【web开发】☆★之利用POI操作Excel表格系列教程【10】单元格填充色和颜色操作

[web开发]☆★之利用POI操作Excel表格系列教程[10]单元格填充色和颜色操作 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellStyle; import

【web开发】☆★之利用POI操作Excel表格系列教程【11】单元格合并

[web开发]☆★之利用POI操作Excel表格系列教程[11]单元格合并 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.Row; import org.apache.p

制作滚动表格，表格头不动，内容滚动

有这个需求,其实也不难,就是弄两个表格组合,结合marquue标签就行了,代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <he

表头不动，内容滚动的例子(纯css+html)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Table</title> <style type="text/css"> .table{ width: 100%; border-collapse:collapse; border-spacing:0; } .fixedThead{ display: block;

table中thead保持不动，tbody滚动(2)

如果table中的th和td都没有合并列,可以不设th和td宽度 #tblDataList{ height:600px;}#tblDataList thead { display:block;} #tblDataList tbody { display:block; height:600px; overflow-y:scroll;} #tblDataList thead tr { display:table; width:100%; table-layout:fixed;}#tblDataLis

table中thead保持不动，tbody滚动(3)

如果thead中需要合并列 #tblDataList thead {display:block;} #tblDataList tbody { display:block;height:600px; overflow-y:scroll;overflow-x: hidden;} #tblDataList thead tr { display:table; width:100%; table-layout:fixed;}#tblDataList tbody tr {display:table; wid