CODEWITHSUNDEEP
jquerycsshtml-tablemedia-queries
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

Make My Table Responsive

I have read CSS-Tricks on how to make responsive table, but my table is the other way around.. HORIZONTAL way.. My headings are in the left not at the top of the table. Here's my DEMO

<table border="1" colspan="1" width="781">
        <tbody>
            <tr>
                <td><strong>Package</strong>
                </td>
                <td>Silver</td>
                <td>Gold</td>
            </tr>
            <tr>
                <td><strong>Number of Books</strong>
                </td>
                <td>5</td>
                <td>100</td>
            </tr>
            <tr>
                <td><strong>Extra Cover</strong>
                </td>
                <td>Special</td>
                <td>Super Special</td>
            </tr>
            <tr>
                <td><strong>FREE Pencil</strong>
                </td>
                <td>X</td>
                <td>1000</td>
            </tr>
        </tbody>
    </table>

So I have two questions about this:

  1. How can I make this Responsive? (Not the type that the whole table shrinks, it wont be readable in mobile devices.)
  2. Instead of using table, is there an alternative?

Upvotes: 0

Views: 104

Answers (2)

Vainglory07
Vainglory07

Reputation: 5293

Try to contain your table in a div and whenever table overflow just show a scroll bar same with the idea of Bootstrap Responsive Tables.

You can view a DEMO HERE.

Upvotes: 1

user2887914
user2887914

Reputation: 3

I would take a look at the way layers css does tables. - http://eiskis.net/layers/

It's open source so you can download it and check out their method.

Upvotes: 0

Related Questions