CODEWITHSUNDEEP
htmlcssmobile
ITGirl
ITGirl

Reputation: 37

html email table cell stacking

I have a request to do some complex stacking for an html email. The HTML table looks like this:

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

This shows as:

-------------------------
|data...|data...|data...|
-------------------------

On the mobile view I would like it to display as:

-----------------
|data...        |
-----------------
|data...|data...|
-----------------

What do I need to put into my media style sheet to make this happen? Thanks!

Upvotes: 0

Views: 896

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42354

Tables are notoriously bad at responsiveness. Your best bet would be to add a media query that turns your table components (table, tr and td) into block-level elements at a mobile width. As block-level elements they'll sit on top of each other by default.

From here, if you want to display two elements on the first line and one on the second, you can simply float the cells to the left, and specify a width on the table that will force the third cell to overflow onto the next line.

This can be seen in the following:

@media screen and (max-width: 768px) {
  table, tr, td {
    display: block;
  }
  
  table {
    width: 100px;
  }
  
  td {
    float: left;
  }
}
<table>
  <tr>
    <td>data...</td>
    <td>data...</td>
    <td>data...</td>
  </tr>
</table>

To display one cell in the first row and two in the second, you can additionally specify that the first cell should take up the full 'row' width width td:first-of-type:

@media screen and (max-width: 768px) {
  table, tr, td {
    display: block;
  }
  
  table {
    width: 100px;
  }
  
  td {
    float: left;
  }
  
  td:first-of-type {
    width: 100px;
  }
}
<table>
  <tr>
    <td>data...</td>
    <td>data...</td>
    <td>data...</td>
  </tr>
</table>

Hope this helps!

Upvotes: 1

ridoansaleh
ridoansaleh

Reputation: 624

You can use Media Query for responsive purpose in CSS3. Otherwise, if you want to make it simple, you could use Bootstrap v4.0 magic on responsive table class. It will be better to understand the concept of Media Query first.

Upvotes: 0

Related Questions