表格中表头固定表体出现滚动条
作者:互联网
在表格当中如果内容太多的情况下可以选择让表格带滚动条,但是如果直接在table中添加的话会表头也跟着一起滚动,可以通过写两个table标签来实现这种情况,但是这种情况必须手动控制每个列的宽度
<div class="box-table" > <table> <div style="position: absolute;left: 15px;top: 57px;"> <table> <thead class="th"> <tr> <th><div>1</div></th> <th><div>2</div></th> <th><div>3</div></th> <th><div>4</div></th> <th><div>5</div></th> <th><div>6</div> </th> <th><div>7</div></th> <th><div>8</div></th> <th><div>9</div></th> <th><div>10</div></th> </tr> </thead> </table> </div> <div style="margin-top: 72px;height: 323px;overflow: auto;width: 100%;"> <table> <tbody class="t-body"> <tr v-for="(list,index) in 100" :key="index" class="tbody_tr"> <td><div>1</div></td> <td><div>2</div></td> <td><div>3</div></td> <td><div>4</div></td> <td><div>5</div></td> <td><div>6</div></td> <td><div>7</div></td> <td><div>8</div> </td> <td><div>9</div></td> <td><div>10</div></td> </tr> </tbody> </table> </div> </table> </div>
这种方法没有兼容性问题,但是不能自动的根据内容显示宽度,只能自定义控制宽度
标签:10,表格,表体,表头,滚动条,宽度,table 来源: https://www.cnblogs.com/guogang1201/p/15015162.html