Databases
StackOverflow2013
Postsdbo
POSpacing between thead and tbody
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpacing between thead and tbody
    text
    copied!<p>I have a simple html table like this:</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt;&lt;th&gt;Column 1&lt;/th&gt;&lt;th&gt;Column 2&lt;/th&gt;&lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="odd first-row"&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt; &lt;tr class="even"&gt;&lt;td&gt;Value 3&lt;/td&gt;&lt;td&gt;Value 4&lt;/td&gt;&lt;/tr&gt; &lt;tr class="odd"&gt;&lt;td&gt;Value 5&lt;/td&gt;&lt;td&gt;Value 6&lt;/td&gt;&lt;/tr&gt; &lt;tr class="even last-row"&gt;&lt;td&gt;Value 7&lt;/td&gt;&lt;td&gt;Value 8&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>And I would like to style it the following way:</p> <ul> <li>header row with a box-shadow</li> <li>whitespace between the header row and the first body row</li> </ul> <p><img src="https://i.stack.imgur.com/gWO0F.png" alt="Box Shadow on Header + Spacing to Body"></p> <p>I have tried different things:</p> <pre><code>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;*/ } </code></pre> <p>See also: <a href="http://labcss.net/#8AVUF" rel="noreferrer">http://labcss.net/#8AVUF</a></p> <p>Does anyone have any tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload