技術標籤：html表格html

• 表頭、表尾固定，表格內容超出一定高度會出現滾動條
• 思路是弄三個table，頭、內容、尾各佔一個，內容用滾動的盒子包裹，頭和尾也可以用div包裹：

<div class="table">
  <table class="table-head">
    <tr>
      <th></th>
    </tr>
  </table>
  <div class="table-content">
    <
 
table>
      <tr>
        <td></td>
      </tr>
    </table>  
  </div>
  <div class="table-foot">
    <table>
      <tr>
        <td></td>
      </tr>  
    </table>
  </div>
</div>

• table的寬度建議用px，用百分比的時候，如果出現滾動條，會導致滾動條擠佔table的內容導致table內容不對齊的情況出現。

/*less語言*/
.table {
  width: 780px;
  max-height: 320px;/*整個table的最大高度*/
  text-align: center;
  border: 1px solid rgba(215, 225, 244, 1);
  &-head {
    border-collapse: collapse;
    background: #e6f0ff;
    width: 780px;
    height: 30px;
    line-height: 15px;
    th {
      width: 12.5%;
      border
 
: 1px solid rgba(215, 225, 244, 1);
    }
  }
  &-content {
    max-height: 240px;/*表格內容的最大高度*/
    width: 788px;
    overflow-y: auto;
    overflow-x: hidden;
    table {
      border-collapse: collapse;
      width: 780px;
      td {
        width: 12.5%;
        height: 30px;
        border: 1px solid rgba(215, 225, 244, 1);
      }
    }
  }
  &-foot {        
    width: 780px;
    height: 30px;
    line-height: 30px;
    table {
      width: 100%;
      height: 30px;
      border-collapse: collapse;
      td {
        width: 12.5%;
        border: 1px solid rgba(215, 225, 244, 1);
      }
      td:first-child {
        width: 50%;
      }
    }
  }
}

• 不懂less也沒關係，把&換成table，巢狀代表層次關係，學一會less就懂了