BootStrap table 左侧固定列，表头固定 垂直滚动条，水平滚动条展示在可视化界面

要实现Bootstrap Table的左侧固定列，表头固定，且具有垂直滚动条的功能，可以使用Bootstrap Table的fixedColumns扩展。以下是实现这一功能的基本步骤和示例代码：

1. 引入必要的CSS和JS文件：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
 
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
 
<!-- Fixed Columns Extension JS -->
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>

2. 设置HTML结构，创建表格：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <table id="myTable"
             data-toggle="table"
             data-height="400"
             data-fixed-columns="true"
             data-fixed-number="1">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <!-- more headers -->
          </tr>
        </thead>
        <tbody>
          <!-- table rows -->
        </tbody>
      </table>
    </div>
  </div>
</div>

3. 初始化表格并设置固定列的数量：

$(function() {
  var $table = $('#myTable');
  $table.bootstrapTable({
    data: data // 假设你有一个数据源叫做data
  });
});

data-fixed-columns="true"属性启用固定列功能，data-fixed-number="1"设置你想要固定的列数，例如，设置为1将固定第一列。

确保你的表格容器.container-fluid有足够的宽度，以便水平滚动条能够显示在可视化界面。

以上代码实现了Bootstrap Table的左侧固定列功能，表头固定，并且具有垂直滚动条。水平滚动条会显示在可视化界面，以便用户可以在较大分辨率下同时查看表格的横向内容。