HBuilderMUI中添加固定列固定表头的表格，单元格根据宽度⾃
适应
1.导⼊js和css⽂件:
2.接着在⾃⼰的html这么⽤：特别注意作者的表格，宽度不是⾃适应的，会有换⾏的出现，你可以在table上添加如下css样式:
<table class="table browser-table " id="example" >
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile Fixed Columns Table example(bootstrap.css)</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/scroll/bootstrap.min.css" rel="stylesheet">
<link href="../css/scroll/table_scroll.css" rel="stylesheet">
<script src="../js/scroll/jquery.js"></script>
<script src="../js/scroll/jquery.dataTables.js"></script>
<script src="../js/scroll/FixedColumns.js"></script>
<script src="../js/scroll/iscroll.js"></script>
<script src="../js/bile-fixed-columns-table.js"></script>
<script>
$(document).ready(function() {
var headerHeight = $('.header').outerHeight(true);
var theadHeight = $('#example thead').outerHeight(true);
var footerHeight = $('.footer').outerHeight(true);
var scrollY = $(window).height() - headerHeight - theadHeight - footerHeight;
$('#example').mobileFixedColumnsTable({
'sScrollY': '450px',
'sScrollX': '100%',
'bScrollCollapse': true,
'oLanguage': {
'sInfo': ''
}
}, {
fixedColumnsOptions: { // 请参考DataTables的FixedColumns的配置
iLeftColumns: 2
scrollerOptions: { // 请参考iScroll的配置
onScrollMove: function() {
//console.log(this, arguments);
}
}
});
});
</script>
</head>
<body>
<div class="table-responsive">
<table class="table browser-table " id="example" > <thead>
<tr>
<th>品种</th>
<th>最新价</th>
<th>涨跌</th>
<th>买价</th>
<th>卖价</th>
<th>最⾼价</th>
<th>最低价</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>黄⾦9999</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeC">
<td>黄⾦9998</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄⾦9997</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄⾦9995</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>黄⾦9994</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>黄⾦9993</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>黄⾦9992</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>黄⾦9991</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>黄⾦9991</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>黄⾦9990</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA">
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>青铜9998</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>青铜9997</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>青铜9994</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>青铜9994</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
css设置表格滚动条<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>青铜9994</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td> </tr>
<tr class="gradeA"> <td>青铜9994</td> <td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css⽂件内容table_scroll.css:
/* 为了滚动的表格使⽤样式:
* 覆盖bootstrap的样式, 默认为100%, 会造成⽔平滚动条出不来 */
table {
max-width: none;
}
.table {
margin-bottom: 0;
}
.table td {
border-top-style: dotted;
}
.browser-table adeA {
background-color: #ddffdd;
}
.browser-table adeA {
background-color: #eeffee;
}
.browser-table adeC {
background-color: #ddddff;
}
.browser-table adeC {
background-color: #eeeeff;
}
.browser-table adeX {
background-color: #ffdddd;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论