html - Divide single table into 2 table in mobile view with bootstrap -


i have single table in desktop. client wants shown 2 tables in mobile view. there way achieve without duplication of html or should take div method instead of table?

desktop view:

enter image description here

mobile view:

enter image description here

you can use 2 table this

pic

table

code

<!doctype html> <head>     <meta charset="utf-8">     <style>         .tb_1{             float:left;             width:50%;         }         .tb_2{             float:right;             width:50%;         }         @media screen , (max-width: 619px) {             .tb_1{width:100%;}             .tb_2{width:100%;}         }     </style> </head> <body>     <table class="tb_1" border="1">         <tr>             <td>1</td>             <td>2</td>             <td>3</td>         </tr>         <tr>             <td>6</td>             <td>7</td>             <td>8</td>         </tr>     </table>     <table class="tb_2" border="1">         <tr>             <td>4</td>             <td>5</td>         </tr>         <tr>             <td>9</td>             <td>10</td>         </tr     </table> </body> </html> 

Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -

Nuget pack csproj using nuspec -