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

© 2017 Esteem. All Rights Reserved | Design by W3layouts