jquery - 如何在bootstrap 3.3.7中修复左列表

This question already has answers here:

Fix First Column of a Bootstrap Table
                                
                                    （3个答案）
                                
                        
                                2年前关闭。
            
                    
我需要在引导程序3.3.7中修复左表列（日期和所有列名称）。

我尝试使用位置：固定；符合，但这不是很好。

我该怎么办。

https://fiddle.jshell.net/umj9zknj/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-hover table-striped table-bordered">
  <tr>
    <td colspan="15"> Thu 05 th Apr, 2018</td>
  </tr>
  <tr>
    <td> Name </td>
    <td> 08.00-08.30 </td>
    <td> 08.30-09.00 </td>
    <td> 09.00-09.30 </td>
    <td> 09.30-10.00 </td>
    <td> 10.00-10.30 </td>
    <td> 10.30-11.00 </td>
    <td> 11.00-11.30 </td>
    <td> 11.30-12.00 </td>
    <td> 12.00-12.30 </td>
    <td> 12.30-13.00 </td>
    <td> 13.00-13.30 </td>
    <td> 13.30-14.00 </td>
    <td> 14.00-14.30 </td>
    <td> 14.30-15.00 </td>
  </tr>
  <tr>
    <td> Jack </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

最佳答案

尝试下面的表格示例

jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
    });

.table-scroll {
    position:relative;
    max-width:1024px;
    margin:auto;
    overflow:hidden;
}

.table-wrap {
    width:100%;
    overflow:auto;
}
.table-scroll table {
    width:100%;
    margin:auto;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll th, .table-scroll td {
    padding:5px 10px;
    background:#fff;
    white-space:nowrap;
    vertical-align:top;

}
.table-scroll thead, .table-scroll tfoot {
    background:#f9f9f9;
}
.clone {
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}
.clone th, .clone td {
    visibility:hidden
}
.clone td, .clone th {
    border-color:transparent
}
.clone tbody td:first-child {
    visibility:visible;
    color:black;
}
.clone .fixed-side {
    visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}

<div id="table-scroll" class="table-scroll">
  <div class="table-wrap">
    <table class="main-table table table-bordered">

      <tbody>
        <tr>
          <th colspan="15" class="fixed-side"> Thu 05 th Apr, 2018</th>

        </tr>
        <tr>
          <th class="fixed-side">Date</th>
          <td> 08.00-08.30 </td>
    <td> 08.30-09.00 </td>
    <td> 09.00-09.30 </td>
    <td> 09.30-10.00 </td>
    <td> 10.00-10.30 </td>
    <td> 10.30-11.00 </td>
    <td> 11.00-11.30 </td>
    <td> 11.30-12.00 </td>
    <td> 12.00-12.30 </td>
    <td> 12.30-13.00 </td>
    <td> 13.00-13.30 </td>
    <td> 13.30-14.00 </td>
    <td> 14.00-14.30 </td>
    <td> 14.30-15.00 </td>
        </tr>
        <tr>
          <th class="fixed-side">Name</th>
          <td>jack</td>
         <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
        </tr>

      </tbody>

    </table>
  </div>
</div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>