html table表头固定自适应宽度,HBuilder MUI 中添加固定列固定表头的表格,单元格根据宽度自适应...

Mobile Fixed Columns Table example(bootstrap.css)

品种

最新价

涨跌

买价

卖价

最高价

最低价

时间

黄金9999

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9998

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9997

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9995

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9994

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9993

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9992

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9991

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9991

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

黄金9990

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9999

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9998

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9997

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9994

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9994

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9994

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9994

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30

青铜9994

279.15

1.31

279.10

288.45

299.45

340.45

2018-01-30    css文件内容table_scroll.css:

/* 为了滚动的表格使用样式:

* 覆盖bootstrap的样式, 默认为100%, 会造成水平滚动条出不来 */

table {

max-width: none;

}

.table {

margin-bottom: 0;

}

.table td {

border-top-style: dotted;

}

.browser-table tr.odd.gradeA {

background-color: #ddffdd;

}

.browser-table tr.even.gradeA {

background-color: #eeffee;

}

.browser-table tr.odd.gradeC {

background-color: #ddddff;

}

.browser-table tr.even.gradeC {

background-color: #eeeeff;

}

.browser-table tr.odd.gradeX {

background-color: #ffdddd;

}

.browser-table tr.even.gradeX {

background-color: #ffeeee;

}

.browser-table tr.odd.gradeU {

background-color: #ddd;

}

.browser-table tr.even.gradeU {

background-color: #eee;

}

.DTFC_LeftHeadWrapper,

.DTFC_LeftBodyWrapper {

border-right: 0px solid #000;/*1px的话就有横线*/

}

.DTFC_LeftHeadWrapper,

.dataTables_scrollHeadInner {

border-bottom: 0px solid #000;/*1px的话就有横线*/

}

.header {

text-align: center;

background: #0290da;

margin: 0;

}

.footer {

position: absolute;

bottom: 2px;

right: 2px;

width: 100%;

text-align: right;

background: #f5f5f5;

padding: 10px 0;

}

.name {

text-decoration: none;

color: #333;

}    这样之后,就可以实现移动端的水平和竖向滚动,并且固定前几列功能,效果还不错,再次感谢作者,关于刷新数据的,还在研究中:

版权所有 IT知识库 CopyRight © 2000-2050 IT知识库 IT610.com , All Rights Reserved.

京ICP备09083238号