Permalink
Browse files

Version 1.0 ready.

Themes finalized, responsive css file removed, sortable.js removed
  • Loading branch information...
1 parent 27f07a0 commit ed905a724223b32435d024c4395b1ebc3a93f773 @bwsewell committed May 4, 2012
View
@@ -1,4 +1,25 @@
-tablecloth
-==========
+tablecloth.js
+=============
-A CSS and JS bootstrap to style and manipulate data tables
+tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.
+
+We've all been there. Either you're redesigning a large site or working on a completely new one... styling tables is typically tedious and time-consuming. If you'd rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting:
+
+```javascript
+// Without any customizations
+$("table").tablecloth();
+
+// With customizations
+$("table").tablecloth({
+theme: "default",
+bordered: true,
+condensed: true,
+striped: true,
+sortable: true,
+clean: true,
+cleanElements: "th td",
+customClass: "my-table"
+});
+```
+
+tablecloth builds off the [Twitter Bootstrap](http://twitter.github.com/bootstrap/). It also includes popular jQuery table manipulation plugins like [tablesorter](http://tablesorter.com/docs/).
@@ -1 +0,0 @@
-@media (max-width: 767px) { .table { font-size:11px; } }
View
@@ -41,6 +41,108 @@
padding:10px 0;
}
+/* DARK THEME */
+
+.table-dark {
+ width: 100%;
+ margin-bottom: 18px;
+ color:#CCC;
+}
+.table-dark caption {
+ color:#FFF;
+}
+.table-dark th,
+.table-dark td {
+ padding: 8px;
+ line-height: 18px;
+ text-align: left;
+ vertical-align: top;
+ border-top: 1px solid #232323;
+}
+.table-dark th.headerSortable:hover {
+ cursor:pointer;
+}
+.table-dark th.headerSortDown,
+.table-dark th.headerSortUp {
+ background-color:#000;
+ background-image: url('../img/asc_light.gif');
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+.table-dark th {
+ font-weight: bold;
+}
+.table-dark thead th {
+ background:#111;
+ color:#E5E5E5;
+ vertical-align: bottom;
+}
+.table-dark colgroup + thead tr:first-child th,
+.table-dark colgroup + thead tr:first-child td,
+.table-dark thead:first-child tr:first-child th,
+.table-dark thead:first-child tr:first-child td {
+ border-top: 0;
+}
+.table-dark tbody + tbody {
+ border-top: 2px solid #232323;
+}
+.table-dark.table-condensed th,
+.table-dark.table-condensed td {
+ padding: 4px 5px;
+}
+.table-dark.table-bordered {
+ border: 1px solid #232323;
+ border-left: 0;
+ border-collapse: separate;
+ *border-collapse: collapsed;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.table-dark.table-bordered th,
+.table-dark.table-bordered td {
+ border-left: 1px solid #232323;
+}
+.table-dark.table-bordered thead:first-child tr:first-child th,
+.table-dark.table-bordered tbody:first-child tr:first-child th,
+.table-dark.table-bordered tbody:first-child tr:first-child td {
+.table-dark border-top: 0;
+}
+.table-dark.table-bordered thead:first-child tr:first-child th:first-child,
+.table-dark.table-bordered tbody:first-child tr:first-child td:first-child {
+ -webkit-border-radius: 4px 0 0 0;
+ -moz-border-radius: 4px 0 0 0;
+ border-radius: 4px 0 0 0;
+}
+.table-dark.table-bordered thead:first-child tr:first-child th:last-child,
+.table-dark.table-bordered tbody:first-child tr:first-child td:last-child {
+ -webkit-border-radius: 0 4px 0 0;
+ -moz-border-radius: 0 4px 0 0;
+ border-radius: 0 4px 0 0;
+}
+.table-dark.table-bordered thead:last-child tr:last-child th:first-child,
+.table-dark.table-bordered tbody:last-child tr:last-child td:first-child {
+ -webkit-border-radius: 0 0 0 4px;
+ -moz-border-radius: 0 0 0 4px;
+ border-radius: 0 0 0 4px;
+}
+.table-dark.table-bordered thead:last-child tr:last-child th:last-child,
+.table-dark.table-bordered tbody:last-child tr:last-child td:last-child {
+ -webkit-border-radius: 0 0 4px 0;
+ -moz-border-radius: 0 0 4px 0;
+ border-radius: 0 0 4px 0;
+}
+.table-dark.table-striped tbody tr:nth-child(odd) td,
+.table-dark.table-striped tbody tr:nth-child(odd) th {
+ background-color: #393939;
+}
+.table-dark tbody tr td,
+.table-dark tbody tr th,
+.table-dark tbody tr:hover td,
+.table-dark tbody tr:hover th {
+ background-color: #333;
+}
+
/* STATS THEME */
.table-stats {
@@ -81,6 +183,13 @@
.table-stats.table-bordered {
border-left: 0;
}
+.table-stats th,
+.table-stats td {
+ background:#FFF;
+ color:#666;
+ border-top: none;
+ border-radius:0 !important;
+}
.table-stats thead tr th, .table-stats thead tr.colhead:nth-child(1) th {
font-size:13px;
font-weight:bold;
@@ -126,13 +235,6 @@
border-bottom:1px solid #FFF;
border-radius:0 !important;
}
-.table-stats th,
-.table-stats td {
- background:#FFF;
- color:#666;
- border-top: none;
- border-radius:0 !important;
-}
.table-stats th.headerSortable:hover {
cursor:pointer;
}
@@ -173,4 +275,78 @@
.table-stats tbody:first-child tr:first-child th,
.table-stats tbody:first-child tr:first-child td {
border-top: 0;
+}
+
+/* PAPER THEME */
+
+.table-paper {
+ border:1px solid #D0D7E9;
+ border-collapse: separate;
+ *border-collapse: collapsed;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0 !important;
+ font-family:helvetica,arial,sans-serif;
+ color:#333;
+ box-shadow:0 1px 2px #E5E5E5;
+}
+.table-paper caption {
+
+}
+.table-paper.table-bordered {
+ border-left: 0;
+}
+.table-paper thead tr th {
+ font-size:13px;
+ font-weight:bold;
+ background:#EFEFEF;
+ color:#666;
+ border-radius:0 !important;
+ border-top:none;
+}
+.table-paper th,
+.table-paper td {
+ background:#FFF;
+ color:#666;
+ box-shadow:inset 0 1px 0 #D0D7E9;
+ border-top:none;
+ border-radius:0 !important;
+}
+.table-paper th.headerSortable:hover {
+ cursor:pointer;
+}
+.table-paper th.headerSortDown { background-color:#D9D9D9; }
+.table-paper th.headerSortUp { background-color:#D9D9D9; }
+.table-paper.table-bordered th, .table-paper.table-bordered td {
+ box-shadow:inset 0 1px 0 #D0D7E9, inset 1px 0 0 #D0D7E9;
+ border-left:none;
+ border-top:none;
+}
+.table-paper.table-bordered tbody td:nth-child(2) {
+ box-shadow:inset 0 1px 0 #D0D7E9;
+ border-left:none;
+ border-top:none;
+}
+.table-paper.table-striped tbody tr:nth-child(even) td,
+.table-paper.table-striped tbody tr:nth-child(even) th,
+.table-paper.table-striped tbody tr:nth-child(even):hover td,
+.table-paper.table-striped tbody tr:nth-child(even):hover th {
+ background-color: #F4F6F9;
+}
+.table-paper.table-striped tbody tr:nth-child(odd) td,
+.table-paper.table-striped tbody tr:nth-child(odd) th,
+.table-paper.table-striped tbody tr:nth-child(odd):hover td,
+.table-paper.table-striped tbody tr:nth-child(odd):hover th {
+ background-color: #FFF;
+}
+.table-paper thead:first-child tr:first-child th,
+.table-paper tbody:first-child tr:first-child th,
+.table-paper tbody:first-child tr:first-child td {
+ box-shadow:none !important;
+ border-top:none !important;
+}
+.table-paper tbody tr th:first-child,
+.table-paper tbody tr td:first-child {
+ border-right:4px double #EE3531;
+ padding-left:10px;
}
@@ -35,9 +35,11 @@
});
// Get rid of all inline styling and deprecated table attributes
+ // Also get rid of any current classes being applied to the <table> element
if (opts.clean) {
- this.removeAttr('style')
+ this.removeAttr('class')
+ .removeAttr('style')
.removeAttr('cellpadding')
.removeAttr('cellspacing')
.removeAttr('bgcolor')
@@ -61,9 +63,15 @@
if (opts.theme == "default") {
this.addClass("table");
}
+ else if (opts.theme == "dark") {
+ this.addClass("table table-dark");
+ }
else if (opts.theme == "stats") {
this.addClass("table table-stats");
}
+ else if (opts.theme == "paper") {
+ this.addClass("table table-paper");
+ }
// Set the table theme accordingly
if (opts.customClass != "") {
View
No changes.
View
@@ -7,7 +7,6 @@
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/tablecloth.css" rel="stylesheet">
- <link href="assets/css/tablecloth-responsive.css" rel="stylesheet">
<link href="assets/css/prettify.css" rel="stylesheet">
</head>
@@ -515,11 +514,10 @@
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("table").tablecloth({
- theme: "stats",
+ theme: "paper",
striped: true,
- condensed: true,
- clean: true,
- sortable: true
+ sortable: true,
+ condensed: true
});
});
</script>

0 comments on commit ed905a7

Please sign in to comment.