CODEWITHSUNDEEP
responsive-designhtml-tablemailing
Annie The Cross
Annie The Cross

Reputation: 183

How to make <td> responsive

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>

Upvotes: 8

Views: 34224

Answers (2)

Division Six
Division Six

Reputation: 304

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

Upvotes: 5

Shaminder Singh
Shaminder Singh

Reputation: 1293

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

Upvotes: 13

Related Questions