How to make responsive

Question

I am doing responsive mail and I need to make responsive td in table (without class or using media-query).

Simply - I need on small devices rank the td under them.

<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%;  background-color: #fff; max-width:600px;">     
  <tr>
    <td><a href="https://www.blahblah.com/"><img src="pic" /></a></td>
    <td><a href="https://blahblah2.com/><img src="pic"  /></a></td>
    <td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
    <td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
  </tr>                                           
</table>

yes - I need something like display:block; but its not working — Annie The Cross, Nov 09 '15 at 10:37
try my solution, tried inline-block for every column. It worked for me. — Shaminder Singh, Nov 09 '15 at 11:04

Shaminder Singh · Answer 1 · 2015-11-09T11:09:44.090

You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases. As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :

<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
        background-color: #fff; max-width: 600px;">
        <tr>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
        </tr>
    </table>

Fiddle here

It works! Only last problem is that now is all on left... http://jsfiddle.net/LgLmxmL6/2/ — Annie The Cross, Nov 09 '15 at 11:08

score 5 · Answer 2 · answered Mar 12 '20 at 18:29

You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.

@media only screen and (min-width: 0px) and (max-width: 700px) {
    td {
        display:inline-block;
        padding:5px;
        width:100%;
    }
}

How to make responsive

2 Answers2