Webkit(Safari + Apple Mail) adds 1px width for an empty cells

[dudeonthehorse]

This is an example of responsive table layout

<table width="100%">
 <tr>
  <th style="font-size: 0; padding: 0;">&nbsp;</th>
  <th width="600" style="padding: 0;">
   <!-- content -->
  </th>
  <th style="font-size: 0; padding: 0;">&nbsp;</th>
 </tr>
</table>

For correct responsibility we should use viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Screenshot with example of the problem

Source code of email from screenshot https://gist.github.com/dudeonthehorse/77e33aa3a1797883b88a6eb11c969b72

[hteumeuleu]

This can be typically solved by adding a table-layout:fixed; on your main table.

[revelt]

And using zero is dangerous, I'm using 1px, as in font-size: 1px; line-height: 1px;

[hteumeuleu]

@revelt Interesting, why do you consider using zero dangerous?

[revelt]

It's more spammy than "1", also, some years I've seen a bug which I believe was caused by zero and combination of other factors, just didn't document so can't prove.

In general, zero is really necessary: 1) to prevent gaps in hybrid, https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — that and 2) real hidden elements like preheaders.

Everywhere else 1px is fine, you don't intend to completely hide the module. The thing is, if some ISP will mark your email as spammy, you won't know fast/easy enough, so it's better to be on the cautious side.

I'm open to suggestions and different opinions 👍

[revelt]

Speaking about th, is it still relevant?

[hteumeuleu]

<th> will always be relevant because of WebKit. In WebKit, in Quirks Mode, setting display:block on a <td> does not work, but it does work on a <th>. (I wrote a bit about this here.)

[revelt]

Awesome article, I have it saved for reference and come often.

What still bugs me is this question: is it still recommended to switch to th, considering we'll have to defuse the center/bold later?

I still believe not but prove me wrong.

I'm looking at my Apple Mail and emails are rendering perfectly there, stacking etc. Now Safari by definition, as a browser, is good too. Practically, is there any reason why th should be used? Reading again the http://labs.actionrocket.co/td-or-not-to-td-that-is-now-a-question the th hack was all about Android and it has been fixed since in Gmail, hasn't it? OK, maybe some niche apps will render badly but they will likely have other issues as well. Market share for iOS + mobile Gmails dwarfs any niche Android email app.

[hteumeuleu]

@revelt th is still relevant for email clients who use no doctype. Per my last tests almost two years ago, this was the case in popular french email clients (Orange and SFR) and also on Samsung Email (on Android 4). Not sure how this holds up today, but I'd say there'd still be email clients doing this. So it's really up to you. I feel using th helps provide an overall wider support. Resetting the default styles on a th can be easily done with a text-align and font-weight property which are extremely widely supported as far as I know.

[revelt]

right, the national ISP's, thought so 👍