如何让我的表格内容滚动，表格结构保持固定？答案

【问题标题】：How do I get my table contents to scroll, the table structure stays fixed?如何让我的表格内容滚动，表格结构保持固定？
【发布时间】：2020-01-08 02:02:06
【问题描述】：

我需要水平滚动表格内容，但表格结构应该保持不变。我怎样才能做到这一点？在我的代码中，它随着表结构滚动。在这种情况下，圆角半径仅在两端可见。我需要使背景结构固定，内容水平滚动。我需要如下图所示的输出。

table {
  width: 120%;
}

td {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
  padding-left: 20px;
}

.scrollsec {
  overflow-x: scroll;
}

th {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
}

th:nth-child(1) {
  border-radius: 11px 0px 0px 9px;
}

th:nth-last-child(1) {
  border-radius: 0px 11px 9px 0px;
}

.bodySec {
  background: #fff;
  border-radius: 10px;
}

.he20 {
  height: 20px;
}

.bodySec tr:nth-child(1) td:nth-child(1) {
  border-radius: 11px 0px 0px 0px;
}

.bodySec tr:nth-child(1) td:nth-last-child(1) {
  border-radius: 0px 9px 0px 0px;
}

.bodySec tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0px 0px 11px 0px;
}

.bodySec tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0px 0px 0px 11px;
}

.scrollsec::-webkit-scrollbar-thumb {
  height: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

<div class="col-md-12 col-sm-12 col-xs-12  scrollsec">
  <table>
    <thead class='tableHeadSec'>
      <tr>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
      </tr>

    </thead>
    <tr class='he20'></tr>
    <tbody class='bodySec'>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
    </tbody>
  </table>


</div>

【问题讨论】：

代码 - jsfiddle.net/user94/kn9fhL4x/6

标签： javascript jquery html css html-table

【解决方案1】：

table {
  width: 100%;
}

table, td {
  border-collapse: collapse;
  border: 1px solid #000;
}

thead {
  display: table; 
  width: calc(100% - 15px); 
}

tbody {
  display: block;
  max-height: 200px; 
  overflow-y: scroll;
}

th, td {
   
  padding: 5px;
  word-break: break-all; 
}

tr {
  display: table; 
  width: 100%;
  box-sizing: border-box; 
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}

 <table>
    <thead>
      <tr>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
      </tr>

    </thead>
   
    <tbody >
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
    </tbody>
  </table>

css：

  table {
      width: 100%;
    }

    table, td {
      border-collapse: collapse;
      border: 1px solid #000;
    }

    thead {
      display: table; 
      width: calc(100% - 15px); 
    }

    tbody {
      display: block;
      max-height: 200px; 
      overflow-y: scroll;
    }

    th, td {

      padding: 5px;
      word-break: break-all; 
    }

    tr {
      display: table; 
      width: 100%;
      box-sizing: border-box; 
    }

    td {
      text-align: center;
      border-bottom: none;
      border-left: none;
    }

HTML：

<table>
    <thead>
      <tr>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
        <th>Transaction Id</th>
      </tr>

    </thead>

    <tbody >
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
      <tr>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>
        <td>Transaction Id</td>

      </tr>
    </tbody>
  </table>

我希望这对你有帮助。它只是示例数据。

【讨论】：

我需要水平滚动。结构将保持不变。
究竟需要什么？要不要在表格顶部滚动。
你需要这种类型的设计吗？
这是我的工作代码。在那种情况下，当我滚动表结构时也会滚动。我只能在两端看到边界半径。我需要固定大纲，内容应该水平滚动。
您需要固定表格，但应该滚动 tbody

【解决方案2】：

您可以查看此解决方案：

https://codepen.io/Khadembd/pen/GRKOaVj

body{
  font-family:arial;
}

table{
  border-collapse:collapse;
  width:900px;
}

thead tr th, tbody tr td{
  text-align:left;
  padding:10px 15px;
  width:300px;
}

thead tr th{
  background-color:#333;
  color:#fff;
}

.tbody{
  display: block;
  height:200px;
  overflow-y:auto;
}

tbody tr td{
  border-bottom:1px solid #ccc;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone Number</th>
    </tr>
  </thead>
</table>
<table class="tbody">
  <tbody>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>John</td>
      <td>john@gmail.com</td>
      <td>123456789</td>
    </tr>
  </tbody>
</table>

【讨论】：