Databases
StackOverflow2013
Postsdbo
POSpace between tr's, with tr's as contiguous blocks
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpace between tr's, with tr's as contiguous blocks
    text
    copied!<p>I want to format a table to show as rows, with each row being a contiguous box, and with space between the rows. Example:</p> <pre><code>&lt;table&gt; &lt;tr&gt;&lt;td&gt;John&lt;/td&gt;&lt;td&gt;Doe&lt;/td&gt;&lt;td&gt;24&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Jack&lt;/td&gt;&lt;td&gt;Foo&lt;/td&gt;&lt;td&gt;34&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Jim&lt;/td&gt;&lt;td&gt;Beam&lt;/td&gt;&lt;td&gt;102&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; </code></pre> <p>What I want should look something like the following:</p> <p><img src="https://i.stack.imgur.com/Kk4J5.png" alt="enter image description here"></p> <p>I have achieved the above by making additional tr-rows between the data:</p> <pre><code>&lt;style&gt; body { background-color: #aaaaff; } table { border-collapse: collapse; } .space_tr { height: 1px; } .info_tr { background-color: grey; } .info_tr td { padding: 5 20 5 20px; } &lt;/style&gt; &lt;table&gt; &lt;tr class='info_tr'&gt;&lt;td&gt;John&lt;/td&gt;&lt;td&gt;Doe&lt;/td&gt;&lt;td&gt;24&lt;/td&gt;&lt;/tr&gt; &lt;tr class='space_tr'&gt;&lt;td colspan='3'&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr class='info_tr'&gt;&lt;td&gt;Jack&lt;/td&gt;&lt;td&gt;Foo&lt;/td&gt;&lt;td&gt;34&lt;/td&gt;&lt;/tr&gt; &lt;tr class='space_tr'&gt;&lt;td colspan='3'&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr class='info_tr'&gt;&lt;td&gt;Jim&lt;/td&gt;&lt;td&gt;Beam&lt;/td&gt;&lt;td&gt;216&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; </code></pre> <p>But I want to know if I can achieve this formatting with just CSS, i.e. without changing anything in the html that I wrote in the top. </p> <p>EDIT:</p> <p>Adam Kiss suggested using a bottom-border with same color as the background. This works in my current case, but as he points out, this will not work when having background which is not just a same-color surface. </p> <p>For completeness: Can the above be achieved while maintaining transparency of the spacing gaps?</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