1.定义元素的高度和宽度。
2.使用 overflow : hidden 属性来隐藏文本的剩余部分。
3.使用 text-overflow: ellipsis 来显示省略号。
4.使用 white-space: nowrap 来确保文本不会换行。
5.使用 transition 属性来启用滑动动画，以便在滑动时能够显示文本的全部内容。
这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动
最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。
纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。
但横向滚动呢？
首先想到的方案是在最外面的div,outer加上 overflow-x:auto
虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。
然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。
之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。
最后突然想到一个position的新属性，sticky
设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。
所以最后设置了表头
css:
就成功实现了想要的效果了。
不过sticky的兼容性也是要考虑一下的。
大家都知道css中<ul>元素中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白 查了资料才实现下面GIF图的效果。（有什么更好的方法或者有写的不对的地方 希望大神们多多指出，与君共勉）
效果GIF图：
第一步 ul 中的css设置 <ul id = "list"></ul>
#list { overflow-x: auto//设置x轴可滑动 list-style: none//去掉li上的小点 white-space:nowrap//元素不换行 width: auto(宽度) }
第二步 li中的css设置 <li class = "item">
.item { margin-left: 20px//每个li设置间距为20px display: inline-block//让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }
先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。
这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动
width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。
使用用flex-box布局
#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}
