Skip to content

Instantly share code, notes, and snippets.

@martinnormark

martinnormark/countersunk-table-rows.css

Created January 15, 2013 10:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martinnormark/4537774 to your computer and use it in GitHub Desktop.
Save martinnormark/4537774 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for rendering table rows, as if they were countersunk in relation to the rows above and below
Raw
countersunk-table-rows.css
tr.countersink.top td {
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
tr.countersink td {
background-color: #F7F7F7;
-webkit-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.125);
border-top: none;
}
tr.countersink.bottom td {
-webkit-box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.125);
}
Raw
countersunk-table.html
<table class="table table-striped table-bordered">
<tr><td>First Name</td><td>Last Name</td></tr>
<tr><td>First Name</td><td>Last Name</td></tr>
<tr class="countersink top"><td>First Name</td><td>Last Name</td></tr>
<tr class="countersink"><td>First Name</td><td>Last Name</td></tr>
<tr class="countersink"><td>First Name</td><td>Last Name</td></tr>
<tr class="countersink bottom"><td>First Name</td><td>Last Name</td></tr>
<tr><td>First Name</td><td>Last Name</td></tr>
<tr><td>First Name</td><td>Last Name</td></tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment