CSS Static Table

Name Age City From To Visits
George 19 San Francisco 01/01/14 07/07/15 15
Robin 23 Washington 01/01/14 07/07/15 32
Charles 20 San diego 01/01/14 07/07/15 26
	                <table class="table">
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>City</th>
			<th>From</th>
			<th>To</th>
			<th>Visits</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>George</td>
			<td>19</td>
			<td>San Francisco</td>
			<td>01/01/14</td>
			<td>07/07/15</td>
			<td>15</td>
		</tr>
		<tr>
			<td>Robin</td>
			<td>23</td>
			<td>Washington</td>
			<td>01/01/14</td>
			<td>07/07/15</td>
			<td>32</td>
		</tr>
		<tr>
			<td>Charles</td>
			<td>20</td>
			<td>San diego</td>
			<td>01/01/14</td>
			<td>07/07/15</td>
			<td>26</td>
		</tr>
	</tbody>
</table>
                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-tables-vars-custom: (

// TABLE
table-border-width: 0,
table-border-color: transparent,
table-border-style: none,

// THEAD TD & THEAD TH
thead-cell-padding: $spacing/4 $spacing/2,
thead-cell-border-width: 0 0 1px 0,
thead-cell-border-color: $color-box,
thead-cell-border-style: solid,
thead-cell-font-size: $font-size-default,
thead-cell-font-family: $font-face-default,
thead-cell-font-weight: normal,
thead-cell-background: transparent,
thead-cell-align: left,
thead-cell-vertical-align: middle,
thead-cell-color: $color-foreground,

// TBODY
tbody-ouline: 2px solid $color-background,
tbody-border-width: 1px,
tbody-border-color: $color-box-light,
tbody-border-style: solid,
tbody-color: $color-foreground,
tbody-background: $color-background,

// TBODY TR
tr-odd-background: rgba($color-box, .5),
tr-hover-background: rgba($color-primary, .1),

// TBODY TD
tbody-cell-padding: $spacing/2 $spacing/2,
tbody-cell-border-width: 0 1px 1px 0,
tbody-cell-border-color: $color-box,
tbody-cell-border-style: solid,
tbody-cell-font-size: $font-size-default,
tbody-cell-font-family: $font-face-default,
tbody-cell-font-weight: normal,
tbody-cell-background: transparent,
tbody-cell-align: left,
tbody-cell-vertical-align: middle,
tbody-cell-color: $color-foreground,

) !global !default;