在日常开发工作中，常常会遇到表格相关的各种需求，本文将通过代码实例，实现table的表头thead固定，tbody高度超出时滚动，同时，单元格内容超出宽度时以省略号显示。
以下方法的实现重点是将表单元素转换成行内块（由此tbody可实现超出滚动），并将单元格赋予固定值，可实现单元格内容超出以省略号显示，这样的实际需求决定了此种情况下的table不再是根据内容而响应的。
在设置td的宽度时，有时总和要比100%小些才不会导致一行放不下，猜测应该是因为滚动条有一定的宽度。(后续有机会再补充)
<!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>