Basic 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;
}
}