Tables
Basic Implementation
| Name | Age | Gender | Height | Province | Sport |
|---|---|---|---|---|---|
| Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball |
| John Stone | 30 | Male | 5'9 | Ontario | Badminton |
| Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey |
| Gary Mountain | 21 | Male | 5'8 | Alberta | Curling |
| James Camera | 31 | Male | 6'1 | British Columbia | Hiking |
$('#table').basictable(); Modifying Breakpoint
| Name | Age | Gender | Height | Province | Sport |
|---|---|---|---|---|---|
| Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball |
| John Stone | 30 | Male | 5'9 | Ontario | Badminton |
| Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey |
| Gary Mountain | 21 | Male | 5'8 | Alberta | Curling |
| James Camera | 31 | Male | 6'1 | British Columbia | Hiking |
$('#table-breakpoint').basictable({
聽聽聽聽breakpoint: 768,
}); Force Responsive Off
| Name | Age | Gender | Height | Province | Sport |
|---|---|---|---|---|---|
| Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball |
| John Stone | 30 | Male | 5'9 | Ontario | Badminton |
| Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey |
| Gary Mountain | 21 | Male | 5'8 | Alberta | Curling |
| James Camera | 31 | Male | 6'1 | British Columbia | Hiking |
$('#table-force-off').basictable({
聽聽聽聽forceResponsive: false,
}); Max Height
| Name | Age | Gender | Height | Province | Sport |
|---|---|---|---|---|---|
| Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball |
| John Stone | 30 | Male | 5'9 | Ontario | Badminton |
| Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey |
| Gary Mountain | 21 | Male | 5'8 | Alberta | Curling |
| James Camera | 31 | Male | 6'1 | British Columbia | Hiking |
$('#table-max-height').basictable({
聽聽聽聽tableWrapper: true
}); Use Media Query Over JS Resize
| Name | Age | Gender | Height | Province | Sport |
|---|---|---|---|---|---|
| Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball |
| John Stone | 30 | Male | 5'9 | Ontario | Badminton |
| Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey |
| Gary Mountain | 21 | Male | 5'8 | Alberta | Curling |
| James Camera | 31 | Male | 6'1 | British Columbia | Hiking |
@media only screen and (max-width: 568px) {
聽聽#table-no-resize thead {
聽聽聽聽聽聽display: none;
聽聽}
聽聽#table-no-resize tbody td {
聽聽聽聽聽聽border: none !important;
聽聽聽聽聽聽display: block;
聽聽聽聽聽聽vertical-align: top;
聽聽}
聽聽#table-no-resize tbody td:before {
聽聽聽聽聽聽content: attr(data-th) ": ";
聽聽聽聽聽聽display: inline-block;
聽聽聽聽聽聽font-weight: bold;
聽聽聽聽聽聽width: 6.5em;
聽聽}
聽聽#table-no-resize tbody td.bt-hide {
聽聽聽聽聽聽display: none;
聽聽}
} $('#table-no-resize').basictable({
聽聽聽聽noResize: true,
}); Two Axis Styling
| Name | Age | Gender | Height | Province | Sport |
|---|---|---|---|---|---|
| Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball |
| John Stone | 30 | Male | 5'9 | Ontario | Badminton |
| Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey |
| Gary Mountain | 21 | Male | 5'8 | Alberta | Curling |
| James Camera | 31 | Male | 6'1 | British Columbia | Hiking |
table.two-axis tr td:first-of-type {
聽聽聽聽background: #dff1f7;
}
@media only screen and (max-width: 568px) {
聽聽聽聽table.two-axis tr td:first-of-type,
聽聽聽聽table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
聽聽聽聽table.two-axis tr td:first-of-type:before {
聽聽聽聽聽聽聽聽background: #dff1f7;
聽聽聽聽聽聽聽聽color: #ffffff;
聽聽聽聽}
聽聽聽聽table.two-axis tr td:first-of-type {
聽聽聽聽聽聽聽聽border-bottom: 1px solid #e4ebeb;
聽聽聽聽}
} 
Copyright 漏 2017.Company name All rights reserved.