purist-css/src/tables/tables-skin.css

Purist a complete reimagining of Yahoo's Pure to be less opinionated and more abstracted.

/* ==========================================================================
   #tables-skin
   ========================================================================== */

/* 
   table
   ========================================================================== */

/**
 * The skin for the table object.
 *
 * Usage:
 *
 * <table class="o-table">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.o-table th,
.o-table td {
	padding: .5em 1em;
}

/*
   #table--rows/cells
   ========================================================================== */

/**
 * The skin for tha table--rows and table--cells modifier.
 *
 * Usage:
 *
 * <table class="o-table o-table--cells">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */
.o-table--rows td,
.o-table--cells th,
.o-table--cells td {
	border-color: #e1e1e1;
}

/*
   #table--zebra
   ========================================================================== */

/**
 * The skin for the table--zebra modifier.
 *
 * Usage:
 *
 * <table class="o-table o-table--zebra">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.o-table--zebra tbody > tr:nth-child(even) {
	background-color: #f8f8f8;
}