CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Hacker
Hacker

Reputation: 7906

Divide single table into 2 table in mobile view with bootstrap

I have a single table in desktop. Client wants its to be shown as 2 tables in mobile view. Is there a way to achieve it without duplication of html or should I take div method instead of table?

Desktop view:

enter image description here

Mobile view:

enter image description here

Upvotes: 1

Views: 180

Answers (1)

sadegh
sadegh

Reputation: 1642

you can use 2 table together like 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 only screen and (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>

Upvotes: 1

Related Questions