<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap-table.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="../js/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<!-- <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/fixed-columns/bootstrap-table-fixed-columns.css"
rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
-->
<link rel="stylesheet" href="../css/bootstrap-table-fixed-columns.css">
<script src="../js/bootstrap-table-fixed-columns.js"></script>
<style type="text/css">
</style>
</head>
<body>
<table id="table" class="table table-bordered table-hover" data-toggle="table" data-classes="table table-hover"
data-show-columns="true" data-striped="true" data-show-toggle="true" data-search="true" data-show-refresh="true"
data-toolbar="#toolbar" data-height="200">
<thead>
<tr>
<th>表格 ID</th>
<th>表格 Name</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
<th>表格 Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
</table>
<script type="text/javascript">
//#table表示的是上面table表格中的id
$("#table").bootstrapTable('destroy').bootstrapTable({
fixedColumns: true,
fixedNumber: 1, //固定列数
});
$(function() {
$('#table').bootstrapTable();
$(window).resize(function() {
$('#table').bootstrapTable('resetView');
});
})
</script>
</body>
</html>