js表格插件html css,basictable.js-jQuery响应式表格插件

基本表格Demo

基本实现

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

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

Mail

5'8

Alberta

Curling

James Camera

31

Male

6'1

British Columbia

Hiking

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

修改Breakpoint

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

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

Mail

5'8

Alberta

Curling

James Camera

31

Male

6'1

British Columbia

Hiking

$('#table-breakpoint').basictable({

breakpoint: 768,

});

Force Responsive Off

The script will not force the table to be responsive. The table will only go into responsive mode when the table is actually larger than its parent container. In this demo the parent of table is the div with id page.

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

Mail

5'8

Alberta

Curling

James Camera

31

Male

6'1

British Columbia

Hiking

$('#table-force-off').basictable({

forceResponsive: false,

});

最大高度

Some tables could get very long in responsive. You could set a max-height in mobile where scrolling within the table would happen. Turn on tableWrapper to get a container around the table that toggles an active class. You could also just create your own wrapper and match the breakpoint to do this.

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

Mail

5'8

Alberta

Curling

James Camera

31

Male

6'1

British Columbia

Hiking

$('#table-max-height').basictable({

tableWrapper: true

});

CSS Controls

Use Media Query Over JS Resize

If you don't want to use the js bind on resize you can use css to control the breakpoint itself. Using basic table to setup the structure itself and copying basictable.css styles into your own media query.

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

Mail

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

Two axis could be styled differently. This does not need to be done through the library itself. The example code will show how to target the first column in desktop and first row in responsive mode.

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

Mail

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;

}

}