css——table: thead固定,tbody高度固定超出滚动
CSS Table 滚动 高度 固定 超出
2023-09-27 14:29:10 时间
参考:https://www.cnblogs.com/chaoyueqi/p/9174297.html
效果:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> table.table-wrapper { table-layout: fixed; width: 100%; border:1px solid gray; font-size:20px; text-align:left; } table.table-wrapper thead{ background:#eee; } table.table-wrapper tbody { display: inline-block; width: 100%; overflow: auto; max-height: 100px; } table.table-wrapper tr { display: flex; width: 100%; } table.table-wrapper td, table.table-wrapper th { display: inline-block; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }</style> </head> <body> <table class="table-wrapper"> <thead> <tr> <th>商品名称</th> <th>商品数量</th> <th>商品价格</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>1</td> <td>1</td> </tr> <tr> <td>商品2</td> <td>2</td> <td>2</td> </tr> <tr> <td>商品3</td> <td>3</td> <td>3</td> </tr> <tr> <td>商品4</td> <td>4</td> <td>4</td> </tr> <tr> <td>商品5</td> <td>5</td> <td>5</td> </tr> <tr> <td>商品6</td> <td>6</td> <td>6</td> </tr> </tbody> </table> </body> </html>
相关文章
- CSS中的动画效果
- 一文带你入门css【选择器的详细介绍】
- React中css的module
- Div+CSS布局入门教程
- 【HTML+CSS+JavaScript】动感爱心—— I love you~
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
- vue2借助animate.css实现路由动画效果
- maven工程如何引用css和js文件
- jQuery的属性与样式之样式操作.css()
- 看完这篇文章保你面试稳操胜券——基础篇(html/css)
- CSS去除链接虚线(兼容IE6、IE7)
- 一个健壮且可扩展的 CSS 架构所需的8个简单规则
- 重学前端 42 # 用代码挖掘W3C中的CSS属性