thead固定，tbody高度超出时滚动的实现方法

在日常开发工作中，常常会遇到表格相关的各种需求，本文将通过代码实例，实现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的时候，基本直接都封装好了。

序号	片名1aaaaaaaaaaaaaaaaaaaaa	导演	剧情介绍
1	超时空同居	导演名	每当我遇到自己不敢直视的困难时，我就会闭上双眼，想象自己是一个80岁的老人，为人生中曾放弃和逃避过的无数困难而懊悔不已，我会对自己说，能再年轻一次该有多好，然后我睁开眼睛：砰！我又年轻一次了！
2	2aaaaaaaaaaaaaaaaaaaaa	品名1	价格1价格1价格1价格1
3	品名1	品名1	价格1
4	品名1	品名1	价格1
5	品名1	品名1	价格1
6	品名1	品名1	价格1
7	品名1	品名1	价格1