jQuery flextable: Responsive Table Demo
Change window size to see, how it works
Base Usage
Opta |
duntiatin |
explaborpor |
autatur |
esto |
blacietur |
autet |
libus |
ducillam |
this |
is |
the |
first |
row |
of |
this |
test |
table |
this |
is |
the |
second |
row |
of |
this |
test |
table |
$('#table').flextable();
HTML Content Demo
All content
$('#html').flextable();
Combined option
This demo breaks earlier then the demo above because the red marked parent container has only 80% of window width
Opta |
duntiatin |
explaborpor |
autatur |
esto |
blacietur |
autet |
libus |
ducillam |
this |
is |
the |
first |
row |
of |
this |
test |
table |
this |
is |
the |
second |
row |
of |
this |
test |
table |
$('#parent').flextable([{
combine: true,
});
Window width (with setup value)
Calculates table when window is smaller than 800px even table would fit.
Opta |
duntiatin |
explaborpor |
autatur |
esto |
blacietur |
this |
is |
the |
first |
row |
of |
this |
is |
the |
second |
row |
of |
$('#window').flextable({
bt: 'window',
bw: 800
});
Calculates only on load
Opta |
duntiatin |
explaborpor |
autatur |
esto |
blacietur |
autet |
libus |
ducillam |
this |
is |
the |
first |
row |
of |
this |
test |
table |
this |
is |
the |
second |
row |
of |
this |
test |
table |
$('#load').flextable({
cm: 'load',
});
Table without <thead> and <tbody>
Opta |
duntiatin |
explaborpor |
autatur |
esto |
blacietur |
autet |
libus |
ducillam |
this |
is |
the |
first |
row |
of |
this |
test |
table |
this |
is |
the |
second |
row |
of |
this |
test |
table |
$('#oldstyle').flextable({
hcell: '.tablehead',
});