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

Question

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

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>

Answer 1

你可以检查这个解决方案:

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>