为什么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; }

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

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;
}