<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
<th>Province</th>
<th>Sport</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill Smith</td>
<td>25</td>
<td>Female</td>
<td>5'4</td>
<td>British Columbia</td>
<td>Volleyball</td>
</tr>
<tr>
<td>John Stone</td>
<td>30</td>
<td>Male</td>
<td>5'9</td>
<td>Ontario</td>
<td>Badminton</td>
</tr>
<tr>
<td>Jane Strip</td>
<td>29</td>
<td>Female</td>
<td>5'6</td>
<td>Manitoba</td>
<td>Hockey</td>
</tr>
<tr>
<td>Gary Mountain</td>
<td>21</td>
<td>Mail</td>
<td>5'8</td>
<td>Alberta</td>
<td>Curling</td>
</tr>
<tr>
<td>James Camera</td>
<td>31</td>
<td>Male</td>
<td>6'1</td>
<td>British Columbia</td>
<td>Hiking</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
body {
font-family: 'Lato', sans-serif;
}
table {
width: 100%;
background: white;
border-collapse: collapse;
tr, th, td {
border: none;
border-bottom: 1px solid #e4ebeb;
}
th, td {
padding: 10px 12px;
text-align: left;
}
th {
background: #56a2cf;
color: #ffffff;
text-transform: uppercase;
}
tr {
td {
background: #eaf3f5;
color: #999999;
}
&:nth-of-type(2n+2) td {
background: #ffffff;
}
}
&.bt {
tfoot {
th, td {
padding: 0;
}
}
tbody td {
padding: 0;
}
tfoot {
th:before, td:before {
background: #56a2cf;
color: white;
margin-right: 10px;
padding: 2px 10px;
}
}
tbody td:before {
background: #56a2cf;
color: white;
margin-right: 10px;
padding: 2px 10px;
}
tfoot {
th .bt-content, td .bt-content {
display: inline-block;
padding: 2px 5px;
}
}
tbody td .bt-content {
display: inline-block;
padding: 2px 5px;
}
tfoot {
th:first-of-type {
&:before, .bt-content {
padding-top: 10px;
}
}
td:first-of-type {
&:before, .bt-content {
padding-top: 10px;
}
}
}
tbody td:first-of-type {
&:before, .bt-content {
padding-top: 10px;
}
}
tfoot {
th:last-of-type {
&:before, .bt-content {
padding-bottom: 10px;
}
}
td:last-of-type {
&:before, .bt-content {
padding-bottom: 10px;
}
}
}
tbody td:last-of-type {
&:before, .bt-content {
padding-bottom: 10px;
}
}
}
}
/* Office css */
section {
margin-bottom: 20px;
padding: 15px;
border: 1px solid red;
background-color: #fff9e0;
}
.is {
margin-bottom: 20px;
}
section:last-child,
section .is:last-child,
section p:last-child,
section table:last-child,
section ul:last-child {
margin-bottom: 0 !important;
}
/* Office scss */
@import url('https://fonts.googleapis.com/css?family=Raleway');
$xs : "(min-width: 320px)"; // Extra Small
$ms : "(min-width: 480px)"; // Midium Small
$sm : "(min-width: 768px)"; // Small
$md : "(min-width: 992px)"; // Medium
$lg : "(min-width: 1200px)"; // Large
body {
font-family: 'Raleway', sans-serif;
background-color: #ccc;
font-size: 16px;
}
ul {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
// Border
@mixin border($side: null, $color: white) {
#{if($side, border-#{$side}, border)}: 1px solid $color;
}
// em
$browser-context: 16; // Default
@function em($pixels, $context: $browser-context) {
@return #{$pixels/$context}em
}
// Bottom
@mixin bottom($mb) {
margin-bottom: em($mb);
@media #{$md} { margin-bottom: em($mb + 10); }
}
.page-wrapper {
background-color: #e8e8e8;
}
p {
font-size: em(16);
}
header {
@include bottom(20);
padding: 15px 0;
background-color: blue;
color: white;
}
section {
@include bottom(20);
@include border();
//@include border(bottom, red);
div.is {
@include bottom(20);
}
&, div, p, table, ul {
&:last-child {
margin-bottom: 0 !important;
}
}
}
footer {
padding: 15px 0;
background-color: green;
color: white;
&, div, p, table, ul {
&:last-child {
margin-bottom: 0 !important;
}
}
}
$(document).ready(function() {
$('#table').basictable();
$('#table-breakpoint').basictable({
breakpoint: 768
});
$('#table-container-breakpoint').basictable({
containerBreakpoint: 485
});
$('#table-swap-axis').basictable({
swapAxis: true
});
$('#table-force-off').basictable({
forceResponsive: false
});
$('#table-no-resize').basictable({
noResize: true
});
$('#table-two-axis').basictable();
$('#table-max-height').basictable({
tableWrapper: true
});
});
