Webkit browsers not accounting for padding when determining cell width in table-layout:fixed

Question

I am getting different results when applying table-layout:fixed to a table and using padding on the cells. IE and Firefox seem to work correctly by adding the cell width and the padding together. Chrome and Safari only use the cell width. I saw there is a bug out for the problem, but can't find any workarounds. Does anyone know how to get around it?

WebKit Bugzilla : https://bugs.webkit.org/show_bug.cgi?id=13339

table {
width:200px;
border-collapse:collapse;
}
#table-1 {
table-layout:auto;
}
#table-2 {
table-layout:fixed;
}
td {
padding:5px 10px;
}
td.set-width {
width:15px;
}
.box {
width:15px;
height:15px;
background-color:red;
}

<h2>Table-Layout: Auto</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-1">
<tr>
<td>&nbsp;</td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>unbroken</td>
</tr>
</table>
<h2>Table-Layout: Fixed</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-2">
<tr>
<td>&nbsp;</td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>unbroken</td>
</tr>
</table>

Answer 1

There are 3 methods I can think of.

The easiest would be to add stylesheet blocks interpreted only by Chrome and Safari that adjust behavior to take into account the rendering issue. Avoid using "@media screen and (-webkit-min-device-pixel-ratio:0)" since that can affect Opera and some versions of FF. Use "body:first-of-type":

body:first-of-type td {
padding:5px 10px;
}

You can also have separate stylesheets:

<link rel="stylesheet" type="text/safari" href="webkit-styles.css" />
<link rel="stylesheet" type="text/chrome" href="webkit-styles.css" />

The third option is to use Javascript. Within script tags you can use navigator.appName and navigator.appVersion to identify the browser and fix issues dynamically.

Answer 2

If you have a diff in how they are calculating width when padding is involved, why not remove padding from the td?

<table style="table-layout: fixed;">
 <tr>
  <td style="width: 100px;">
   <div style="padding: 10px;">
    lorem, ipsum.
   </div>
  </td>
 </tr>
</table>

Answer 3

You can work around this bug if you use the <colgroup> tag and specify widths on the <col> INSTEAD OF on the <td>.

.secondCol {
  width: 15px;
}

<table border="1" cellspacing="0" cellpadding="0" id="table-2">
  <colgroup>
    <col class="firstCol">
    <col class="secondCol">
  </colgroup>
  <tr>
    <td>&nbsp;</td>
    <td><div class="box"></div></td>
  </tr>
</table>