栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何创建带有固定/冻结的左列和可滚动主体的HTML表?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何创建带有固定/冻结的左列和可滚动主体的HTML表?

如果您想要一个只有列水平滚动的表,则可以

position:absolute
第一列(并明确指定其宽度),然后将整个表包装在一个
overflow-x:scroll
块中。不过,请不要在IE7中尝试此操作…

相关的HTML和CSS:

table {  border-collapse: separate;  border-spacing: 0;  border-top: 1px solid grey;}td, th {  margin: 0;  border: 1px solid grey;  white-space: nowrap;  border-top-width: 0px;}div {  width: 500px;  overflow-x: scroll;  margin-left: 5em;  overflow-y: visible;  padding: 0;}.headcol {  position: absolute;  width: 5em;  left: 0;  top: auto;  border-top-width: 1px;    margin-top: -1px;  }.headcol:before {  content: 'Row ';}.long {  background: yellow;  letter-spacing: 1em;}<div><table>        <tr><th >1</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>        <tr><th >2</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>        <tr><th >3</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>        <tr><th >4</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>        <tr><th >5</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>        <tr><th >6</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr></table></div>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/400596.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号