How to make <td> 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>

Anamariaanamnesis

you need responsive table ? Tried inline styling ? – Forelli

yes - I need something like display:block; but its not working – Anamariaanamnesis

jsfiddle.net/LgLmxmL6 – Anamariaanamnesis

you should use divs then. – Forelli

Noo, no divs I have to use only tables – Anamariaanamnesis

try my solution, tried inline-block for every column. It worked for me. – Forelli

Answer 1

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

Forelli

It works! Only last problem is that now is all <td> on left... jsfiddle.net/LgLmxmL6/2 – Anamariaanamnesis

where do you want them to be ? – Forelli

Fixed - I made tr text-align: center; :) thanks a lot!! – Anamariaanamnesis

Answer 2

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%;
    }
}

Supereminent