为啥 CSS 转换翻译会将表格行的边框留在原来的位置？

Posted 2023-03-05

【中文标题】为啥 CSS 转换翻译会将表格行的边框留在原来的位置？

【英文标题】：Why CSS transform translate leaves border of table row where it was?为什么 CSS 转换翻译会将表格行的边框留在原来的位置？

【发布时间】：2018-08-18 22:58:23

【问题描述】：

我正在使用 bootstrap 3.7 创建一个表：

body 
    padding: 20px;
    box-sizing: border-box;

table 
    width: 300px;

thead tr 
    background-color: #eee;
    border: 1px solid blue !important;
    

thead tr th 
    border: 1px solid blue !important;



thead tr 
    background-color: #eee;
    border: 1px solid blue !important;
    transform: translateY(-23px);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-bordered" >
    <thead>
        <tr  >
            <th>asdasd</th>
            <th>asdasd</th>
            <th>asdasd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
    </tbody>
</table>

这显示了一个像这样的表：

但是当我尝试添加转换时：

thead tr 
    background-color: #eee;
    border: 1px solid blue !important;
    transform: translateY(23px);

它可以工作，但元素 thead tr 会切断边框，蓝色边框会留在原来的形状：

我真正想要的是：应用转换翻译时我不会丢失thead tr 的边框。

有人知道解决办法吗？对于这个问题，我没有任何其他解决方案。

代码笔：https://codepen.io/iksdatoo/pen/wmBEjg

【问题讨论】：

你能创建一个woking代码以便我们看到问题

答案更新请查收。

无需密码笔，您所需要的都有。

【参考方案1】：

问题是由来自 Bootstrap 的 normalize.css 的规则引起的：

table  border-collapse: collapse; 

如果你覆盖它，转换工作：

body 
    padding: 20px;
    box-sizing: border-box;

table 
    width: 300px;
    border-collapse: separate !important;

thead tr 
    background-color: #eee;
    border: 1px solid blue !important;
    transform: translateY(23px);

thead tr th 
    border: 1px solid blue !important;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-bordered" >
    <thead>
        <tr>
            <th>asdasd</th>
            <th>asdasd</th>
            <th>asdasd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
    </tbody>
</table>

【讨论】：

你如何保持边界在一起，但保持border-collapse: separate？

【参考方案2】：

问题是因为引导程序适用于 border-collapse: collapse; 的表，这意味着：

border-collapse CSS 属性指定单元格是否位于 表格具有共享或单独边框。^ref

而collapse 表示共享边界。换句话说，边框不再属于被翻译的元素，这就是为什么它们在翻译时不会移动：

---

为了修复它，您可以将值更改为separate。

body 
    padding: 20px;
    box-sizing: border-box;

table 
    width: 300px;
    border-collapse:separate!important;

thead tr 
    background-color: #eee;
    

thead tr th 
    border: 1px solid blue !important;



thead tr 
    background-color: #eee;
    transform: translateY(23px);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered" >
    <thead>
        <tr  >
            <th>asdasd</th>
            <th>asdasd</th>
            <th>asdasd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
        <tr>
            <td>asda</td>
            <td>asda</td>
            <td>asda</td>
        </tr>
    </tbody>
</table>