I'm trying to write a responsive email template at present so am restricted to using html tables and inline css (without the assistance of javascript or media queries) in order to support as many email clients as possible.
Specifically I'd like to float some elements (either entire tables or internal columns) so that they fill the width available evenly but also drop to the next to the line when the width available isn't large enough to accommodate all text.
This is my first attempt which spaces the elements evenly within the width available: http://jsfiddle.net/aerospatiale/noy7ur7a/.
table {
width: 100%;
max-width: 600px;
background-color: #eeeeee;
text-align: justify;
}
table:after {
display: inline-block !important;
}
table th {
vertical-align:top;
text-align: center;
font-weight:normal;
}
<table align="center">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>Nine</th>
<th>Ten</th>
</tr>
</table>
This is my second attempt which allows the elements to drop to the next line when necessary but does not evenly distribute the elements within the full width available: http://jsfiddle.net/5qsjn2ys/.
table {
width: 100%;
max-width: 600px;
background-color: #eeeeee;
text-align: justify;
}
table th {
display: inline-block !important;
vertical-align:top;
text-align: center;
font-weight:normal;
}
<table align="center">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>Nine</th>
<th>Ten</th>
</tr>
</table>
Is it possible to combine both these effects to distribute the elements evenly but also allow them to drop to the next line when the available width is not sufficient?
Note: I realise it's a little unorthodox to use th elements, however it's to combat an Android quirk.
Please try to change to
display:blockfor lower screen sizes.http://jsfiddle.net/afelixj/noy7ur7a/2/