Skip to content

Instantly share code, notes, and snippets.

@seancurtis

seancurtis/dabblet.css

Created March 22, 2013 00:59
Show Gist options
  • Save seancurtis/5218155 to your computer and use it in GitHub Desktop.
Save seancurtis/5218155 to your computer and use it in GitHub Desktop.
Download ZIP
Simple, responsive tables with shadow hints
Raw
dabblet.css
/**
* Simple, responsive tables with shadow hints
* Mashing http://www.maxdesign.com.au/2013/03/22/simple-responsive-table/ and http://lea.verou.me/2012/04/background-attachment-local/
*/
body {
margin: 0;
padding: 20px;
color: #000;
background: #fff;
font: 100%/1.3 helvetica, arial, sans-serif;
}
h1 { margin: 0; }
table {
margin: 0;
border-collapse: collapse;
}
td, th {
padding: .5em 1em;
border: 1px solid #999;
}
.container {
width: 600px;
}
.table-container::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
/* Using the Scrolling gradient technique by Lea Verou */
.table-container {
overflow: auto;
width: 100%;
background:
/* Shadow covers */
linear-gradient(left, white, rgba(255,255,255,0)),
linear-gradient(left, rgba(255,255,255,0), white) 100% 0,
/* Shadows */
radial-gradient(left, farthest-side, rgba(0,0,0,.4), rgba(0,0,0,0)),
radial-gradient(right, farthest-side, rgba(0,0,0,.4), rgba(0,0,0,0)) 100% 0;
background:
/* Shadow covers */
linear-gradient(white, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white) 100% 0,
/* Shadows */
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-color: white;
background-size: 60px 100%, 60px 100%, 20px 100%, 20px 100%;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
Raw
dabblet.html
<div class="container">
<h1>
Simple, responsive tables with shadow hints
</h1>
<p>
I took <a href="http://www.maxdesign.com.au/2013/03/22/simple-responsive-table/">A simple (and very rough) responsive table solution</a> and mashed in <a href="http://lea.verou.me/2012/04/background-attachment-local/">Pure CSS scrolling shadows with background-attachment: local</a>. Need to test it across more browsers but cursory investigations shows promise.
</p>
<div class="table-container">
<table>
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row2_cell1</td>
<td>row2_cell2</td>
<td>row2_cell3</td>
<td>row2_cell4</td>
<td>row2_cell5</td>
<td>row2_cell6</td>
<td>row2_cell7</td>
<td>row2_cell8</td>
</tr>
<tr>
<td>row3_cell1</td>
<td>row3_cell2</td>
<td>row3_cell3</td>
<td>row3_cell4</td>
<td>row3_cell5</td>
<td>row3_cell6</td>
<td>row3_cell7</td>
<td>row3_cell8</td>
</tr>
<tr>
<td>row4_cell1</td>
<td>row4_cell2</td>
<td>row4_cell3</td>
<td>row4_cell4</td>
<td>row4_cell5</td>
<td>row4_cell6</td>
<td>row4_cell7</td>
<td>row4_cell8</td>
</tr>
<tr>
<td>row5_cell1</td>
<td>row5_cell2</td>
<td>row5_cell3</td>
<td>row5_cell4</td>
<td>row5_cell5</td>
<td>row5_cell6</td>
<td>row5_cell7</td>
<td>row5_cell8</td>
</tr>
</tbody>
</table>
</div>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment