Skip to content

Instantly share code, notes, and snippets.

@tilomitra
Created March 11, 2013 18:52
Show Gist options
  • Save tilomitra/5136618 to your computer and use it in GitHub Desktop.
Save tilomitra/5136618 to your computer and use it in GitHub Desktop.
csstable with datatable styles built in
/*
* CSS TABLES
* ==========
* Simple CSS for HTML Tables
* Author: tilomitra
*/
/* foundational CSS */
.yui3-table, .yui3-skin-sam .yui3-datatable-table {
/* Remove spacing between table cells (from Normalize.css) */
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
font-family: arial, sans-serif;
border: 1px solid #cbcbcb;
}
.yui3-table caption, .yui3-skin-sam .yui3-datatable-caption {
color: #000;
font: italic 85%/1 arial, sans-serif;
padding: 1em 0;
text-align: center;
}
.yui3-table td,
.yui3-table th,
.yui3-skin-sam .yui3-datatable-cell,
.yui3-skin-sam .yui3-datatable-header {
border-left: 1px solid #cbcbcb;/* inner column border */
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible; /*to make ths where the title is really long work*/
padding: 6px 12px; /* cell padding */
}
.yui3-table td:first-child,
.yui3-table th:first-child,
.yui3-skin-sam .yui3-datatable-cell:first-child,
.yui3-skin-sam .yui3-datatable-first-header {
border-left-width: 0;
}
.yui3-table thead,
.yui3-skin-sam .yui3-datatable-header {
/* header gradient */
background: #fff;
color: #000;
font-weight: normal;
text-align: left;
text-shadow: 0 1px 1px #fff;
vertical-align: bottom;
white-space: nowrap;
border-bottom: 1px solid #cbcbcb;
}
/*
striping:
even - #fff (white)
odd - #edf5ff (light blue)
*/
.yui3-table td,
.yui3-skin-sam .yui3-datatable-cell {
background-color: transparent;
}
.yui3-skin-sam .yui3-datatable-even .yui3-datatable-cell {
background-color: #fff;
}
.yui3-table-odd td,
.yui3-skin-sam .yui3-datatable-odd .yui3-datatable-cell {
background-color: #f2f2f2;
}
/* HORIZONTAL BORDERED TABLES */
.yui3-table-horizontal {
border-width: 1px 0;
}
.yui3-table-horizontal td,
.yui3-table-horizontal th {
border-width: 0 0 1px 0;
border-bottom:1px solid #cbcbcb;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment