极客观点
项目管理
HarmonyOS
我写了一个表格，实现了固定表头，tbody下超出显示滚动条，如图，但在ie9下崩了，而且找不到解决方法。
哪位能写一个兼容ie9的固定表头的表格，不借助bootstrap多余的框架。
两个表，第一个表只有thead，第二个表只有tbody
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style type="text/css">
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 100%;
}
table tbody{
height: 100px;
overflow-y: auto;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
table th:nth-child(1),table td:nth-child(1){
width: 60%;
}
table th:nth-child(2),table td:nth-child(2){
width: 20%;
}
table th:nth-child(3),table td:nth-child(3){
width: 20%;
}
#table-box-1{
padding-right: 17px;
}
#table-box-2{
height: 400px;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="table-box-1">
<table>
<thead>
<tr>
<th>信息内容</th>
<th>发布人</th>
<th>发布时间</th>
</tr>
</thead>
</table>
</div>
<div id="table-box-2">
<table>
<tbody>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
<tr>
<td>信息内容td信息内容td信息内容td信息内容td</td>
<td>张三</td>
<td>2019-01-18</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？
:first-child 选中了什么如题，在学习:first-child伪类的时候，我使用如下语法，但是产生的结果在预料之外。codepen链接html {代码...} css {代码...} 按照:first-child语法，body :first-child选中的应该是body的第一个子元素，也就是 {代码...} 结果选中了这个元素 {代码...} 网上搜索无果，所以来这里提问了，body :f...2 回答904 阅读✓ 已解决
CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？
参考使用：antd的Tag我做了2行的Tag： {代码...} 现在的需求是，如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？3 回答774 阅读✓ 已解决
如何实现类似豆包的AI改写框跟随内容滚动效果？
豆包这种是怎么实现的，ai改写这个框是跟随内容滚动的，但是ai改写这个框是在body下与根节点平级的，想了半天，看他页面上代码也看不出来，求助4 回答1.2k 阅读✓ 已解决
如何在CSS中实现滚动条不溢出圆角框？
请问css如何实现滚动条在外侧滚动框的下一层？我最近在设计一个小插件，里面有一个换肤的小弹窗，小弹窗里还有一个小框，在这个小框里加了滚动条，小框为了美化做了border-radius，然后为这个框自定义了::webkit-scrollbar伪类，但是我发现这个滚动条会溢出这个框，很不好看，下图为现在的效果：我想做到上下的滚动条可...2 回答1.3k 阅读✓ 已解决
请问，是否可以设定Table的宽度，或者不让其超过父容器呢？
我写了一个可编辑Cell的List： {代码...} 使用方式： {代码...} 现在的问题是，比如：内容过长会直接冲出父容器：请问，是否可以设定Table的宽度，或者不让其超过父容器呢？2 回答1.1k 阅读✓ 已解决
在使用antd的Table的时候，需要传入嵌入式datasource，但是为何获取不到数据展示？
请问，在使用antd的Table的时候，需要传入嵌入式datasource，但是获取不到数据展示： {代码...} 结果：请问这个是什么原因导致的呢？没有看到有报错的信息。我怀疑这里有问题：因为title是一个数组： {代码...}1 回答1.7k 阅读✓ 已解决
如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？
当同时设置scroll.x='max-content'和scroll.y的值，并将表头的文字内容设置到比列内容长且列未设置固定宽度时，表头会换行收缩。2 回答2.6k 阅读
一个表格是满足不了你也解决不了你的问题。
你可以考虑用两个
table标签来组合或者
你可以考虑把
table标签中所有的子元素标签的display属性值改掉，不要使用table-*中的任何一个属性值。当然，这个方法我不建议，如果这样，还不如不用table标签。最后，一个只有图的没有任何其他的东西，就这样吧，祝好运。