How To Make HTML Tables Responsive in Blogger Posts?


#1

I hope everyone is having a great time here. Recently one of the members of this Forum (@tijutss) asked about how to make tables responsive.

On WordPress there are plugins to achieve this. But for Blogger we need some codes. What I used to do till now is insert the following simple piece of HTML code:

`

Tech tricks Responsive Table .tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto; background-color:white; height: auto; padding: 5px;}
Name Trust level Badges Joined Likes received Likes Given Notifications
Rohan Ninja 14 Feb 19 62 71 163
`

Output:

I found it too simple and easy and it even worked for me. Anyone who could suggest any other CSS/HTML code to get this done will be appreciated. :trophy:

Anyone can suggest the solution or provide some ideas to improve this code. Thank you. :slight_smile:

~ Rohan.


#2

Try to make table with Bootstrap framework, getbootstrap.com/css/#tables-responsive

You need to add this CSS too:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

And add this HTML:

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

#3

You can make any HTML container responsive and fluid by simply giving it flexible width dimension in percentage. The reason why your table layout is responsive is because you gave it a width of 95%

But if you mobile test your code then you will observe that the table horizontal scroll bar appears as soon as the device screen size reaches 350px, in that case your code breaks! :slight_smile: You need to create breakpoints using the responsive stylesheet I shared earlier here

I also liked @Mad solution because twitter’s bootstrap framework does provide various responsive styles and also one for tables but if you create a custom style-sheet instead then you wont need bootstrap to further increase the blog load time.


#4

Thank you @Mohammad and @Mad. I must try this sometime soon. :slight_smile:


#6

its not working for me and table is not responsive in mobile view


#7

bootstap grids also work very well for responsive design. I just came across bootstap grids and they seem awesome.