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

   HBuilder MUI 中想要实现:添加固定列固定表头的表格,单元格根据宽度自适应,参考如下链接:https://www.douban.com/note/286673563/,还有他的github封装好的android的工程文件,链接如下:移动端固定列js工具,只要把这些文件放在html中,就可以实现固定前几列,然后水平和竖向滚动:

      1.导入js和css文件:

   2.接着在自己的html这么用:特别注意作者的表格,宽度不是自适应的,会有换行的出现,你可以在table上添加如下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;
			}

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