html table使用thead,tbody和tfoot,chrome打印出问题

img
如图所示,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不连接

请问解决了吗