tbody設置超出固定的高度出現滾動條，沒超出不顯示。

沒有超出時顯示樣式，不顯示滾動條：

超出時顯示滾動條：

 

1.html

<table class="table">
  <thead>
    <tr>
      <td>我是表頭1</td>
      <td>我是表頭2</td>
      <td>我是表頭3</td>
      <td>我是表頭4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>內容1</td>
      <td>內容2</td>
      <td>內容3</td>
      <td>內容4</td>
    </tr>
    <tr>
      <td>內容1</td>
      <td>內容2</td>
      <td>內容3</td>
      <td>內容4</td>
    </tr>
    ...
  </tbody>
</table>   

2.css 其中td的寬度，每一行的最后一個td不設置寬度，前面的td設置寬度來讓表格頭部和內容對齊

.table{
  width: 500px;
  border-collapse:collapse;
  background-color: rgba(45,172,255,.1);
  border-right: 1px solid rgba(0,175,237,.3);
  border-top: 1px solid rgba(0,175,237,.3);
}
.table tr td{
  border-bottom: 1px solid rgba(0,175,237,.3);
  border-left: 1px solid rgba(0,175,237,.3);
  color: #fff;
  font-size: 16px;
  padding: 5px 10px; 
  text-align: center;
}
.table tr td:nth-child(1),
.table tr td:nth-child(2),
.table tr td:nth-child(3){
  width: 100px;
}
.table>tbody>tr,.table>thead{
  display: table;
  width: 100%;
  table-layout: fixed; /* 重要  表格固定算法 */
}
.table>tbody{
  height: 200px;
  overflow: hidden;
  display: block;
  overflow: hidden;
  overflow-y: auto;
}