Question

我用固定的表头创建了一个Codepen，但是有一个问题。表格列增加时，滚动到右侧后显示垂直滚动。

如何将垂直滚动体固定到父级，因此始终可见。

https://codepen.io/cybentizen/pen/eXBaor

@media (max-width:991px) {
  table.table-sticky tbody {
    overflow-x: hidden;
  }

  table.table-sticky th,
  table.table-sticky td {
    min-width: 100px !important;
    width: 100px;
  }
}

@media (min-width:768px) {
table.table-sticky tr {
    table-layout: fixed;
}
}

@media (max-width:767px) {
table.table-sticky th,
table.table-sticky td {
    min-width: 150px !important;
}

table.table-sticky tbody {
    overflow-x: hidden;
}
}
table.table-sticky tr {
  width: 100%;
  display: inline-table;
  float: left;}
  table.table-sticky th {
  padding-left: 0;
}

table.table-sticky {
height: 190px;
position: relative;
margin-bottom: 0;
}

table.table-sticky thead {
position: sticky;
width: calc(100% - 17px) !important;
}

table.table-sticky thead th:last-of-type {
border-right: 0;
}

table.table-sticky tbody {
overflow-y: scroll;
overflow-x: hidden;
display: inline-block;
height: 150px;
width: 100%;
/* position: absolute; */
}

table.table-sticky-double tbody {
height: 142px;
}

table.table-sticky tr.collapse {
background-color: #eee;
display:none;
}

table.table-sticky tr.collapse.in {
background-color: #eee;
display: table;
}

table.table-sticky tr.collapse.in td {
border:0;
color: #666;
font-size: 11px;
padding: 0px;
}

table.table-sticky tr.collapse.in td input {
border: 0;
background: transparent;
box-shadow: none;
color: #666;
font-size: 11px;
}

table.table-sticky tr.collapsing {
-webkit-transition: none;
transition: none;
display: none;
}

我还在其中添加了响应式查询以及TD和TR的样式。

Answer 1

我为您的问题使用了简单的技巧。检查并尝试这个

function myf(){     
   var el = document.getElementById('mybody');
   document.getElementById('myhead').scrollLeft=el.scrollLeft;
}

th, td{
   width:80px;
   text-align:left;
}

@media (max-width:991px) {
    table.table-sticky tbody {
        overflow-x: hidden;
    }

    table.table-sticky th,
    table.table-sticky td {
        min-width: 100px !important;
        width: 100px;
    }
}

@media (min-width:768px) {
    table.table-sticky tr {
        table-layout: fixed;
    }
}

@media (max-width:767px) {
    table.table-sticky th,
    table.table-sticky td {
        min-width: 150px !important;
    }

    table.table-sticky tbody {
        overflow-x: hidden;
    }
}

table.table-sticky tr {
    width: 100%;
    display: inline-table;
    float: left;
}

table.table-sticky th {
    padding-left: 0;
}

table.table-sticky {
    height: 190px;
    position: relative;
  margin-bottom: 0;
}

table.table-sticky thead {
    
}

table.table-sticky thead th:last-of-type {
    border-right: 0;
}

table.table-sticky tbody {
    overflow-y: scroll;
    overflow-x: scroll;
    display: inline-block;
    height: 150px;
    width: 400px;
    /* position: absolute; */
}

/*.table-responsive {
    overflow-x: inherit;
}*/

table.table-sticky-double tbody {
    height: 142px;
}

table.table-sticky tr.collapse {
    background-color: #eee;
    display:none;
}

table.table-sticky tr.collapse.in {
    background-color: #eee;
    display: table;
}

table.table-sticky tr.collapse.in td {
    border:0;
    color: #666;
    font-size: 11px;
    padding: 0px;
}

table.table-sticky tr.collapse.in td input {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #666;
    font-size: 11px;
}

table.table-sticky tr.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

thead{   
    width: 400px;
    display: inline-block;
    overflow: hidden;
}

<div style="width: 600px;">
  <div class="table-responsive">
    <table class="table table-striped table-sticky">
      <thead id="myhead">
        <tr>
          <th style="width: 80px; min-width: 80px;">Serial</th>
          <th style="width: 100px; min-width: 100px;">Item code</th>
          <th style="width: 100px; min-width: 100px;">Item name</th>
          <th style="width: 80px; min-width: 80px;">Mfg. Date</th>
          <th style="width: 100px; min-width: 100px;">Expiry Date</th>
          <th style="width: 80px; min-width: 80px;">Length</th>
          <th style="width: 80px; min-width: 80px;">Width</th>
          <th style="width: 80px; min-width: 80px;">Height</th>
          <th style="width: 80px; min-width: 80px;">Action</th>
        </tr>
      </thead>
      <tbody onscroll="myf()" id="mybody">
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
        <tr>
          <td style="width: 80px; min-width: 80px;">0001</td>
          <td style="width: 100px; min-width: 100px;">00010001</td>
          <td style="width: 100px; min-width: 100px;">Item 1</td>
          <td style="width: 80px; min-width: 80px;">01/01/2019</td>
          <td style="width: 100px; min-width: 100px;">01/01/2020</td>
          <td style="width: 80px; min-width: 80px;">5.0</td>
          <td style="width: 80px; min-width: 80px;">3.0</td>
          <td style="width: 80px; min-width: 80px;">0.0</td>
          <td style="width: 80px; min-width: 80px;">x</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Code Pen Example 1

Code Pen Example 2

修复与父级的Bootstrap tbody滚动

1 个答案: