在日常開發工作中，常常會遇到表格相關的各種需求，本文將通過代碼實例，實現table的表頭thead固定，tbody高度超出時滾動，同時，單元格內容超出寬度時以省略號顯示。
以下方法的實現重點是將表單元素轉換成行內塊（由此tbody可實現超出滾動），並將單元格賦予固定值，可實現單元格內容超出以省略號顯示，這樣的實際需求決定了此種情況下的table不再是根據內容而響應的。
在設置td的寬度時，有時總和要比100%小些才不會導致一行放不下，應該是因為滾動條有一定的寬度。通常情況下，不是每一個td都需要設置寬度的，只給需要超出以省略號顯示的td一個固定寬度即可，剩余的會自動分配其余空間。
優化1：將如下代碼中tr的display: inline-block；改為display: flex;，由此，td的寬度總和為100%即可，無需考慮滾動條所占的寬度了。
優化2：配合修改瀏覽器的默認滾動條的css代碼，可以使table更美觀
補充1：當給tr一個background圖片時，在低版本google瀏覽器中，出現了每個td都繼承了tr的背景樣式的bug，目前沒找到比較簡單合適的解決方法，通過本文的例子可以比較快速的解決該問題，雖然本質上table已經不具有table屬性了。
補充2：該方案僅用於純手寫table表格時，當使用一些ui框架比如elementUI的時候，基本直接都封裝好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.table-wrapper {width: 300px;}
.table-wrapper table {
table-layout: fixed;width: 100%;text-align: left;font-size: 10px;border: 1px solid pink;
}
.table-wrapper table tbody{
display: inline-block;width: 100%;overflow: auto;max-height: 100px;
}
.table-wrapper table tr{
display: inline-block;width: 100%;border-bottom: 1px solid #ddd;height: 20px;line-height: 20px;
}
.table-wrapper table td, .table-wrapper table th {
display: inline-block;width: 27.5%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.table-wrapper table td:nth-child(1), .table-wrapper table th:nth-child(1) {
width: 30px;
}
</style>
</head>
<body>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>序號</th>
<th>片名1aaaaaaaaaaaaaaaaaaaaa</th>
<th>導演</th>
<th>劇情介紹</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>超時空同居</td>
<td>導演名</td>
<td>每當我遇到自己不敢直視的困難時，我就會閉上雙眼，想象自己是一個80歲的老人，為人生中曾放棄和逃避過的無數困難而懊悔不已，我會對自己說，能再年輕一次該有多好，然后我睜開眼睛：砰！我又年輕一次了！</td>
</tr>
<tr>
<td>2</td>
<td>2aaaaaaaaaaaaaaaaaaaaa</td>
<td>品名1</td>
<td>價格1價格1價格1價格1</td>
</tr>
<tr>
<td>3</td>
<td>品名1</td>
<td>品名1</td>
<td>價格1</td>
</tr>
<tr>
<td>4</td>
<td>品名1</td>
<td>品名1</td>
<td>價格1</td>
</tr>
<tr>
<td>5</td>
<td>品名1</td>
<td>品名1</td>
<td>價格1</td>
</tr>
<tr>
<td>6</td>
<td>品名1</td>
<td>品名1</td>
<td>價格1</td>
</tr>
<tr>
<td>7</td>
<td>品名1</td>
<td>品名1</td>
<td>價格1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
