为什么CSS转换翻译会使表格行的边界位于何处？

Question

我使用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

Answer 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>

Answer 2

问题是因为bootstrap适用于表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>