Menu
I am creating a table by 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>
But when I try to add transform translate:
thead tr {
background-color: #eee;
border: 1px solid blue !important;
transform: translateY(23px);
}
It works but the element thead tr cuts border and the blue border stays where the original shape was:
What actually I want: I don't to lose the border of thead tr when transform translate is applied.
Does anybody knows a solution for this? I don't have any other solution for this problem.
Code Pen: https://codepen.io/iksdatoo/pen/wmBEjg
977
The translate CSS property allows you to transfer an element from one place to another along the X (horizontal) axis, the Y (vertical) axis, and the Z (depth) axis, similar to how you might think of moving an element using offsets, like top , bottom , left , and right .
An introduction to transform and translate CSS transform is a powerful tranformation property. By using its various functions, you can scale, rotate, skew, or translate HTML elements. One of the most commonly used functions is CSS translate which allows you to move elements.
noBorder td to make the border go away for all the <td> s that are inside of <tr> s with the noBorder class by assigning border: 0 . Note that you do not need to provide the unit (i.e. px ) if you set something to 0 as it does not matter anyway. Zero is just zero.
The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.
The problem is caused by a rule that comes from Bootstrap's normalize.css:
table { border-collapse: collapse; }
If you overwrite that, transforming works:
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>The issue is because bootstrap apply to the table this border-collapse: collapse; which means:
The border-collapse CSS property specifies whether cells inside a table have shared or separate borders.ref
And collapse mean shared border. In other words the border no more belong to the translated element and that's why they are not moving when translating:
In order to fix it you may change the value to 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
