Question

我需要在bootstrap 3.3.7中修复左表列（日期和所有列名）。

我尝试使用position：fixed;但是，这并不好。

我该怎么做。

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>

Answer 1

试试这个。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}


.long {
  height:35px;
  letter-spacing: 1em;
}

<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">
<div>
<table class="table table-hover table-striped table-bordered">
  <tr>
    <td colspan="15"> Thu 05 th Apr, 2018</td>
  </tr>
  <tr>
    <th class="headcol"> Name </th>
    <td class="long"> 08.00-08.30 </td>
    <td class="long"> 08.30-09.00 </td>
    <td class="long"> 09.00-09.30 </td>
    <td class="long"> 09.30-10.00 </td>
    <td class="long"> 10.00-10.30 </td>
    <td class="long"> 10.30-11.00 </td>
    <td class="long"> 11.00-11.30 </td>
    <td class="long"> 11.30-12.00 </td>
    <td class="long"> 12.00-12.30 </td>
    <td class="long"> 12.30-13.00 </td>
    <td class="long"> 13.00-13.30 </td>
    <td class="long"> 13.30-14.00 </td>
    <td class="long"> 14.00-14.30 </td>
    <td class="long"> 14.30-15.00 </td>
  </tr>
  <tr>
    <th class="headcol"> Jack </th>
    <td class="long"></td>
    <td class="long"></td>
    <td></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
  </tr>
</table>
</div>

Answer 2

尝试下面的表格示例

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>

如何在bootstrap 3.3.7中修复左列表

2 个答案: