Why does CSS transform translate leave the border of the table row where it was?

Question

I create a table using 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>

Run codeHide result

This shows a table like this:

But when I try to add transform translate:

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

This works, but the element thead trcuts off the border, and the blue frame remains where the original shape was:

What I really want: I do not lose the border thead trwhen transform translate is applied.

Does anyone know a solution for this? I have no other solution to this problem.

Pen Code: https://codepen.io/iksdatoo/pen/wmBEjg

Answer 1

The problem is caused by the Bootstrap rule 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>

Hide result

Answer 2

, bootstrap this border-collapse: 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>

Hide result

Answer 3

you can try applying transform to all th in thead.tr rather than applying to all thead.tr