如图所示,table使用thead,tbody,tfoot时,表格比较长换页时,tfoot上总是显示一部分空白,IE浏览器打印正常,chrome就是这样,大家有遇到过类似问题么?困扰好久了!
一般谷歌都能兼容IE,建议让用户使用特定的浏览器。或者对谷歌浏览器的css样式,做IE的兼容匹配。
你代码发出来看看,应该不会这样。
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
/* 1rem等于10px */
font-size: 62.5%;
}
.box{
width: 100%;
height: 100%;
}
ul{
list-style: none;
/* display: flex; */
}
li{
width: 100%;
height: 5rem;
display: flex;
position: relative;
}
.leftBox{
line-height: 100%;
height: 100%;
display: flex;
align-items: center;
margin: 0 1.2rem;
}
.leftBox img{
width: 3rem;
height: 3rem;
border-radius: 50%;
}
.centerBox{
/* display: flex;
flex-wrap: wrap; */
height:4rem;
margin: auto 0;
/* padding-left:1.2rem ; */
}
.centerBox .name{
font-size: 1.6rem;
}
.centerBox .text{
font-size:1.2rem;
width: 10rem;
height:2rem;
}
.centerBox1{
height: 5rem;
line-height: 5rem;
/* padding-left:1.2rem ; */
}
.centerBox1 .wen{
font-size: 1.6rem;
}
.rightBox{
line-height: 5rem;
height: 5rem;
position: absolute;
right:12px;
}
.rightBox .rtext{
margin: 0 1.2rem;
color: gray;
}
.hr{
width: 90%;
height: 1px;
margin: 0 auto;
background: gray;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="leftBox">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849" alt="">
</div>
<div class="centerBox">
<span class="name">Li_Yi</span>
<p class="text">管理账号云服务</p>
</div>
<div class="rightBox">
>
</div>
</li>
<li>
<div class="leftBox">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849" alt="">
</div>
<div class="centerBox1">
<span class="wen">Li_Yi</span>
</div>
<div class="rightBox">
<span class="rtext">444</span>>
</div>
</li>
<div class="hr"></div>
</ul>
</div>
</body>
<script>
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 500px;
height: 400px;
overflow:hidden;
border:1px solid red;
border-collapse: collapse;/*关键代码*/
}
tbody{
width:100%;
height: 300px;
overflow: scroll;
}
th,td{
border: 1px solid green;
}
tbody tr{
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tbody>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4444</td>
</tr>
</tfoot>
</table>
</body>
</html>
```html
```
你好,请问这个问题解决了吗?我这边也遇到此问题打印时,tbody与tfoot不连接
请问解决了吗