HTML Table是指使用原生的<table>标签,而CSS Table是指用CSS属性模仿HTML表格的模型。 在W3C关于<table>相关标签的文档中我们可以找到,HTML 4中<table>相关标签的默认样式表: js代码: table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-r...
}tabletheadth{background:#ccc;}</style></head><body><tablewidth="80%"border="1"><thead><tr><th>姓名</th><th>年龄</th><th>出生年月</th><th>手机号码</th><th>单位</th></tr></thead><tbodyclass="scroll scroll-1"><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>...
overflow-y:scroll;} table thead, tbody tr { display:table;width:100%;table-layout:fixed;} table thead { width: calc( 100% - 1em )} table thead th{ background:#ccc;} </style> </head> <body> <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <...
方法/步骤 1 先来看下一个初始的table代码：<html><head><meta charset="utf-8"><style></style></head><body> <table border="1"> <tbody> <tr> <td>111111111111111111111</td> <td>222222222222222222222</td> <td>333333333333333333333</td> <td>444444444444444444444</td> <td>55555555555555555...
首先是给tbody设置display:block;把行内变成块元素,然后给tbody一个固定高度 和 overflow-y:scroll;,确保tbody多余的内容可以滑动。 给thead和tbody tr设置display:table;,主要是table-layout:fixed;,每个单元格均匀分配 为了thead和tbody对齐,给thead宽度 减去滚动条默认宽度(window.innerWidth - document.body.client...
纯CSS实现table固定thead,tbody进行滚动.html 纯CSS实现table固定thead,tbody进⾏滚动.html emmm。公司业务需求。所以⾃⼰写了⼀个表格固定,不过，⽹上也看到了另⼀种⽅法。都放出来。学习使⽤。效果⼀：代码⼀ <!-- * @Descripttion:* @version:* @Author: yang_ft * @Date: 2020-09-29 ...
以下就用简单粗暴的方法实现table头部固定,body超出部分实现垂直滚动的例子:html部分 {代码...} css部分 注释部分是关键代码哦 {代码...}
.table-cont{ /**make table can scroll**/ max-height: 500px; overflow: auto; /** add some style**/ /*padding: 2px;*/ background: #ddd; margin: 20px 10px; border: 1px solid #ddd; } </style> </head> <body> <div class='table-cont' id='table-cont'><!--看这里--> ...
body { font:12px/25px Arial; text-align:center; } .tableMain { width:600px; margin:50px auto 0; } .tableMain, .tableMain th { border-collapse:collapse; border:1px solid #000; } .scrollTable { height: 400px; overflow-x: hidden; overflow-y: auto; width: 100%; } .scrollTable ...
table中，表头固定，body滚动的⽅式。也就是使⽤：cssTable布局-displa。。。两种类型的表格布局 你有两种⽅式使⽤表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。HTML Table是指使⽤原⽣的<table>标签，⽽CSS Table是指⽤CSS属性模仿HTML 表格的模型。在中我们可以...