如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
如何让表头固定，不随滚动条的滚动而滚动
来源：互联网
2023-03-16 19:10:23 160
在web前端开发中，让表头固定，不随滚动条的滚动而滚动。是很多人都会遇到的需求。
下面来水下如何简单的实现
工具/原料
- 浏览器
方法/步骤
先看下初始代码
html>
head>
meta charset="utf-8">
style>
/style>
/head>
body>
div style="overflow-y:scroll;height:200px;width:300px">
table border="1">
tbody>
tr>
th style="color:red;border:2px blue solid;">333333333333333333333/th>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
/tbody>
/table>
/div>
/body>
/html>
很简单，就是一个div包裹了一个table，一个table里面报过了很多行，然后设置div高度，允许div出现滚动条。
运行结果如下所示：
可以看到两图对比，表头没有固定
开始实现表头固定。
原理：在当前div外面在放一个table,这个tablez=只用来盛饭表头，最后在外面在嵌套一个div,把他们全部包含其，这样就能简单的实现了。
代码如下：
html>
head>
meta charset="utf-8">
style>
/style>
/head>
body>
div>
table border="1">
tbody>
tr>
th style="color:red;border:2px blue solid;">33333333333333333333/th>
/tr>
/tbody>
/table>
div style="overflow-y:scroll;height:200px;width:300px">
table border="1">
tbody>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
tr>
td>333333333333333333333/td>
/tr>
/tbody>
/table>
/div>
/div>
/body>
/html>
运行结果，
从结果中我们可以看到实现了表头固定。
实际上还可以通过定位等方式实现表头固定的，
使用的时候最好使用css或者js控制下宽度，就这样了，加油！
注意事项
- 如果您觉得我的经验稍微有点作用的话，请给我投下票，当然如果有疑惑欢迎给我留言，我会持续答复的o(^▽^)o
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：不同的局部图片放图片的大镜效果 下一篇：HTML5+css3实现3D木头人行走
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)