Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It got a little complicated, but there's a demo at <a href="http://jsbin.com/ariza3/" rel="nofollow">JS Bin</a> to demonstrate my approach. I'm not entirely sure that <code>-webkit-border-radius</code> supports the notation that I used (I tested in Chrome which supports <code>border-radius</code>), so it might be worth checking.</p> <p>Incidentally, because of the approach I took (mainly to avoid having to manually add classes) to what could be a 'clean' design, there are some near-bleeding-edge CSS selectors, such as <code>tbody tr:nth-child(odd) td:first-child</code>. I think all of this but the <code>:nth-child(odd)</code> pseudo-selector should be understood by IE7+ (with a valid doctype), but I don't have an installation of Windows on which to test my assumption. As this particular rule is only there to overrule the specificity of the <em>earlier</em> selector to add zebra-striping, if neither are understood nothing is broken, it's just a slightly less jazzy table is all.</p> <p>The CSS is below:</p> <pre><code>body { background-color: #39f; } thead tr th, tbody tr td { background-color: #fff; border-collapse: collapse; color: #000; height: 2em; margin: 0; padding: 0.5em; vertical-align: center; width: auto; } tbody tr:nth-child(odd) td { background-color: #ffa; } th { font-weight: bold; } tr th:first-child, tr td:first-child, tbody tr:nth-child(odd) td:first-child { background-color: transparent; border-radius: 1em 0 0 1em; color: transparent; moz-border-radius: 1em 0 0 1em; padding: 0.5em 0 0.5em 0.5em; webkit-border-radius: 1em 0 0 1em; } tr:hover td:first-child, tbody tr:nth-child(odd):hover td:first-child { background-color: #fff; color: #000; } tbody tr:nth-child(odd):hover td:first-child { background-color: #ffa; color: #000; } </code></pre> <p>And the html:</p> <pre><code> &lt;table cellspacing="0"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <hr /> <p><strong>Edited</strong></p> <p>I've added a side-by-side comparison of the above demonstration and an additional approach, which I think <em>might</em>, in the presence of a valid standards-mode doctype, work reasonably well in older browsers.</p> <p>The revised demo is here: <a href="http://jsbin.com/ariza3/6/" rel="nofollow">JS Bin</a>, and can, of course, be edited by clicking on the 'Edit using JS Bin' button.</p> <p>The relevant CSS can also be seen by hovering over the tables (though it probably works better with larger displays).</p> <hr /> <p><strong>Edited</strong></p> <p>To add in the all finished version, to the best -I think- of my ability, there's two tables (as can be seen at <a href="http://jsbin.com/ariza3/6/" rel="nofollow">JS Bin</a> (each using slightly different mark-up, and quite different css) to demonstrate at least two ways this can be achieved.</p> <h3>Both tables share this CSS:</h3> <pre><code> body { background-color: #39f; } th { font-weight: bold; border-bottom: 2px solid #000; } th.title { border-bottom: 1px solid #000; } th.hidden { border: 0 none transparent; } thead tr th, tbody tr td { width: auto; height: 2em; vertical-align: center; background-color: #fff; color: #000; padding: 0.5em; margin: 0; border-collapse: collapse; } </code></pre> <h3>Next is the 'up-to-date' browsers' CSS:</h3> <pre><code> #preferred thead tr th:first-child { border: 0 none transparent; } #preferred tbody tr:nth-child(odd) td { background-color: #ffa; } #preferred tr th:first-child, #preferred tr td:first-child, #preferred tbody tr:nth-child(odd) td:first-child { color: transparent; background-color: transparent; padding: 0.5em 0 0.5em 0.5em; -webkit-border-top-left-radius: 1em; -webkit-border-bottom-left-radius: 1em; -moz-border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em; } #preferred tr:hover td:first-child, #preferred tbody tr:nth-child(odd):hover td:first-child { color: #000; background-color: #fff; } #preferred tbody tr:nth-child(odd):hover td:first-child { color: #000; background-color: #ffa; } </code></pre> <h3>And the relevant html mark-up:</h3> <pre><code> &lt;table cellspacing="0" id="preferred"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th class="title" colspan="4"&gt;id="preferred"&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <h3>Next is the older browser's CSS:</h3> <pre><code> #ieMaybe { background-color: #39f; } #ieMaybe th, #ieMaybe td { background-color: #fff; } #ieMaybe th.hidden, #ieMaybe td.hidden { color: #39f; background-color: transparent; padding: 0.5em 0 0.5em 0.5em; -webkit-border-top-left-radius: 1em; -webkit-border-bottom-left-radius: 1em; -moz-border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em; } #ieMaybe tr:hover td.hidden, #ieMaybe tr td.hidden:hover { color: #000; background-color: #fff; } </code></pre> <h3>And the older browsers' html mark-up:</h3> <pre><code> &lt;table cellspacing="0" id="ieMaybe"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="hidden"&gt;&lt;/th&gt; &lt;th class="title" colspan="4"&gt;id="ieMaybe"&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th class="hidden"&gt;&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;th&gt;visible&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="hidden"&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="hidden"&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="hidden"&gt;X&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;td&gt;visible&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>I can't say, for sure, what versions of IE &lt; 8 do in the presence of such chicanery, but IE8 (with a <code>&lt;!DOCTYPE html&gt;</code>) renders it willingly, albeit with no pretence at curved borders. Which is a shame, here's waiting for IE9! =)</p> <p>As @Yi Jiang noted, in the comments, there were a couple of errors in the first-posted code, those have been left as is (because I'm starting to go CSS-blind), but the code-blocks above have been directly pasted from the latest working JS Bin demo, so unless <kbd>ctrl</kbd>+<kbd>V</kbd>'s been playing up, it <em>should</em>, I hope, be fine.</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