table頭部 尾部固定 中間內容定高自適應滾動

2022-03-10 10:52:31 字數 1895 閱讀 9195

table頭部、尾部固定;中間內容定高自適應滾動

很多時候,需要使用到**做資料分析,不管是前端展現,還是後台管理系統節點展現

工作過程中遇到了,作為乙個小筆記,備忘!

如下圖所示

**的頭部,和尾部是固定不動的,中間內容隨著內容的增多,而出現滾動條。

序號姓名

性別年齡1張三

男18序號姓名

性別年1齡

如上html結構簡單。精簡。

/*各個部分樣式*/

@charset "utf-8";

body

.container

.form-table

.form-table th

.form-table td

.fixed-thead,

.fixed-tfoot

.fixed-tfoot tr td

.fixed-thead tr,

.fixed-tfoot tr

.fixed-thead tr th,

.fixed-tfoot tr td

.scroll-tbody

.scroll-tbody tr

.scroll-tbody tr td

.form-table .scroll-tbody tr:nth-child(odd) td

-------------------核心對齊樣式---------------------

width: -webkit-calc(100% - 17px);

width: -moz-calc()(100% - 17px);

width: calc(100% - 17px);

相容高階瀏覽器

為了相容ie6,可以使用如下 js去實現

感謝 興友、煒等人的協助得以完善,精益求精!

**********===二次完善追加如下*************************==

鑑於之前的積累,這個初稿很快的實現了

--------設定 display: block;padding-right:17px;

----設定display: block; float: left;width: 100%/x;(x為td數量個數)

--------設定 display: block;固定高度,overflow: auto;

--------設定 display: block;

如上,很快實現初稿。單一table布局,width: calc(100% - 17px);是css3的屬性,可以使用padding-right:17px;

為了使得頭和尾和中間的滾動條對齊

不足之處,得寫死td寬度,不能自適應。這個目前,是專案中,採取的辦法,只能通過,獲取後台資料,在js動態計算

td個數,並重新賦值來實現了。

然,如果是移動端的需求呢?

那便可以非常簡單的實現,只需要使用單一table布局,新增盒子模型display: -webkit-flex;即可實現均分。自適應td列數了

--------設定 display: block;width: calc(100% - 17px);

----設定display: -webkit-flex;

--------設定 display: block;固定高度,overflow: auto;

--------設定 display: block;

此舉,輕而易舉實現。

完結。感謝 輝,lost,楊楠等&……

單個table表頭固定

flex實現table表頭固定

JS列印分頁(上下內容固定,中間內容動態渲染)

var btn mini.getbyname btn directprinting this btn.on click function this directprinting function btn mini.getbyname btn printpreview this btn.on clic...

Table實現表頭固定 內容滾動

序號內容 1我只是用來測試的 2我只是用來測試的 3我只是用來測試的 4我只是用來測試的 table head table body table head table,table body table table body table tr nth child 2n 1 其實關鍵之處在於 1 使用了...

中間滑動 頭部底部固定 選擇合適的自由式頭部位置

許多游泳者 以及一些教練 認為每個游泳者在自由式時都應該直視泳池底部,以改善他們的身體姿勢。這是真的嗎?讓我們來看看一些游泳運動員的水下。泳池明星 首先,我們看一下奧運會金牌得主麗貝卡 阿德靈頓,她向我們展示了乙個中間的頭部位置,看著她前方1 2公尺處的游泳池底部 正如你所看到的,麗貝卡的身體在水中...