How to make the existing bootstrap 2 table responsive?
- Method 1:
To make the table responsive on all viewport size, wrap the table within a opening and closing <div> tags, having class “table-responsive” within the opening <div> tag.
Syntax:
<div class="table-responsive"> <table class="table"> ... </table> </div>Example: The example describe the “table-responsive” Class.
<!DOCTYPE html><htmllang="en"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><linkrel="stylesheet"href=integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Tables</title><style>h1{color:blue;text-align: center;}div{margin-top: 20px;}</style></head><body><divclass="container"><h1>Bootstrap Table Responsive</h1><!-- table-responsive --><divclass="table-responsive"><!-- table --><tableclass="table"><thead><tr><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td></tr></thead><tbody><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr></tbody></table></div></div></body></html>Output:
When window size is normal:
When Window size is small i.e tablet mode:
Scroll bar will appear in tablet as well as mobile mode.
- Method 2: Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
Class Screen Width .table-responsive-sm < 576px .table-responsive-md < 768px .table-responsive-lg < 992px .table-responsive-xl < 1200px Syntax:
<div class="table-responsive-sm"> <table class="table"> ... </table> </div>Example: The example describe the “table-responsive-sm” Class .
<!DOCTYPE html><htmllang="en"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><linkrel="stylesheet"href=integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Tables</title><style>h1{color:blue;text-align: center;}div{margin-top: 20px;}</style></head><body><divclass="container"><h1>Bootstrap Table Responsive-sm</h1><!-- table-responsive --><divclass="table-responsive-sm"><!-- table --><tableclass="table"><thead><tr><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td><thscope="col">Head</td></tr></thead><tbody><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr></tbody></table></div></div></body></html>Output:
when window size is > 576px :
When window size is less than < 576px :
Please Login to comment...