基本实现

基本实现使用默认参数设置。表格的响应式效果发生在宽度小于等于568像素的时候。

$('#table').basictable();

修改Breakpoint

你可以手动修改每个表格的breakpoint。下面的例子将表格的breakpoint设置为768像素，以适应典型的平板电脑和portrait模式。

$('#table-breakpoint').basictable({
    breakpoint: 768,
});

Force Responsive Off

$('#table-force-off').basictable({
    forceResponsive: false,
});

最大高度

$('#table-max-height').basictable({
    tableWrapper: true
});

CSS Controls

@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

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