Spacing between thead and tbody
Solution 1
I think I have it in this fiddle and I updated yours:
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
EDIT better & simpler:
tbody:before {
content:"@";
display:block;
line-height:10px;
text-indent:-99999px;
}
This way text is really invisible
Solution 2
Moreover you can use Zero-Width Non-Joiner to minimize sinsedrix CSS:
tbody:before {line-height:1em; content:"\200C"; display:block;}
Solution 3
This will give you some white space between the header and table content
thead tr {
border-bottom: 10px solid white;
}
Although setting the border colour is a bit of a cheat method, it will work fine.
Form investigation, you can't set box-shadow to a table row, but you can to table cells:
th {
box-shadow: 5px 5px 5px 0px #000000 ;
}
(I'm not sure how you want the shadow to look like, so just adjust the above.)
Solution 4
This worked for me on Chrome (for other browsers I don't know).
.theTargethead::after
{
content: "";
display: block;
height: 1.5em;
width: 100%;
background: white;
}
Such css code creates an empty white space between the thead and the tbody of the table. If I set the background to transparent, the first column of the above tr > th elements shows its own color (green in my case) making about the first 1 cm of the ::after element green too.
Also using the "-" sign in the row content : "-";
instead of the empty string "" can create problems when exporting the printed pages to file, i.e. pdf. Of course this is parser/exporter dependent.
Such exported file opened with a pdf editor (for ex.: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) could still contain the minus sign. The empty string doesn't have the same issue.
No problems in both cases if the printed html table is exported as image: nothing is rendered.
I didn't notice any issue even using
content : "\200C";
Solution 5
So box-shadow doesn't work well on the tr element... but it does work on a pseudo content element; sinsedrix put me on the right track and this is what I ended up with:
table {
position: relative;
}
td,th {padding: .5em 1em;}
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
thead th:first-child:before {
content: "-";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
box-shadow: 0 1px 10px #000000;
padding: .75em 0;
background-color: #ccc;
color: #ccc;
}
thead th {
padding-bottom: 2em;
}
Related videos on Youtube
![BangTheBank](https://i.stack.imgur.com/cWoU1.jpg?s=256&g=1)
BangTheBank
Updated on July 08, 2022Comments
-
BangTheBank almost 2 years
I have a simple html table like this:
<table> <thead> <tr><th>Column 1</th><th>Column 2</th></tr> </thead> <tbody> <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr> <tr class="even"><td>Value 3</td><td>Value 4</td></tr> <tr class="odd"><td>Value 5</td><td>Value 6</td></tr> <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr> </tbody> </table>
And I would like to style it the following way:
- header row with a box-shadow
- whitespace between the header row and the first body row
I have tried different things:
table { /* collapsed, because the bottom shadow on thead tr is hidden otherwise */ border-collapse: collapse; } /* Shadow on the header row*/ thead tr { box-shadow: 0 1px 10px #000000; } /* Background colors defined on table cells */ th { background-color: #ccc; } tr.even td { background-color: yellow; } tr.odd td { background-color: orange; } /* I would like spacing between thead tr and tr.first-row */ tr.first-row { /* This doesn't work because of border-collapse */ /*border-top: 2em solid white;*/ } tr.first-row td { /* This doesn't work because of border-collapse */ /*border-top: 2em solid white;*/ /* This doesn't work because of the td background-color */ /*padding-top: 2em;*/ /* Margin is not a valid property on table cells */ /*margin-top: 2em;*/ }
See also: http://labcss.net/#8AVUF
Does anyone have any tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?
-
Katya Appazova over 12 yearsmaybe similar to: stackoverflow.com/questions/6012924/box-shadow-on-trs
-
sinsedrix over 12 yearsI don't think you can have border collapse for table body but not for table head. Or maybe I don't understand your question.
-
BangTheBank over 12 years@sinsedrix I have added a graphic to show what the styling should look like. Does that make it clearer?
-
BangTheBank over 12 yearsBorder does not work for me at all, because the shadow ends up being rendered in the "middle" of the border... I guess box-shadow on tr is my problem. Using th doesn't give me the effect I want, as I basically want the header row to have a "glow effect" (i.e. shadow for the row, not individual cells)
-
BangTheBank over 12 yearsVery cool, this looks promising! Thank you! Unfortunately this whole thing only seems to work in firefox...
-
ACarter over 12 yearsYou've done it. I would suggest to add:
td,th {padding: .5em 1em;} table {border-collapse: collapse;} thead th:first-child:before {height:1.8em;}
(Just making it look more like the original.) -
ACarter over 12 yearsJust realised you asked the question, so you've probably got that sorted. :)
-
BangTheBank over 12 yearsYeah ;-) I have updated the answer to make it look like the screenshot in the question, in case anyone else stumbles on this question...
-
Srdjan Dejanovic about 11 yearsIt works in all browsers except in IE7. Does anyone have fix for IE7?
-
Friedrich Große almost 10 yearsMaybe it would be better to set visibility: hidden; instead of coloring the text white since you dont want to depend on the assumed background color to change your styles easily.
-
Joseph Spens over 9 yearsYou could also use
text-indent: -100%;
-
firebird631 over 7 yearsI will do "display:table-row" to take the full width of the row.
-
sinsedrix over 7 years@JosephSpens
text-indent: -100%
is not a good solution if there is a great margin around the table. -
Stephen R over 6 yearsI wanted to "chunk" a table by spacing out tbody sections. A variation on your code did the trick:
table tbody:not(:last-child):after
I was especially pleased that the:not()
worked in all major browsers so I didn't have to write a separate bit to de-space the end of the table -
Charles L. over 5 yearsInstead of
color: transparent
you could usevisibility: hidden
so the space is there, but nothing is displayed -
sinsedrix over 5 years@CharlesL. True but in 2012 it was the best way to have it work on most browsers. Maybe today I should make an update
-
Alexander Cherednichenko over 4 yearsit's amazing that it is almost 2020 and we still have to use such hacks to create space between table head and table body, that's crazy :)
-
sinsedrix over 4 years@AlexanderCherednichenko this post is from 2012 so come back in 2022 for the 10th birthday :)
-
Aseem almost 3 years2021 is about to end. We have survived a deadly virus. And yet we cannot put spacing between thead and tbody easily
-
Sohail Saha over 2 yearsThis is an excellent technique! Thanks a lott!
-
ClownCoder over 2 yearsComing back from 2022 to celebrante the 10th anniversary of this post and also to confirm that we still need a hack to space the thead from the tbody!.