In the attached image you'll see the table cell background color "bleeds" and becomes a hairline border on the outside of the table.

Any ideas how to resolve this?

This is the css:

table {
border-collapse: collapse;
}

td {
text-align: center;
border: 2px solid #fff;
font-weight: bold;
font-size: 9.8px;
width: 1.2in;
background-color: #800080;
color: #fff;
}

1. Heatmap_Generated-2-border-bleed.jpg‎ 60.5 kB

Drawing white over other colors is problematic for printed output; ideally it's best to avoid a white border and use border-spacing instead.

I've tried your suggestion and used border-spacing but it's not working with Prince. It does display as expected in the browser.

Image attached.

I've tried placing border-spacing on both the table and table cell. Neither is working.

table.heat-map {
border-collapse: separate;
border-spacing: 2px;
}

1. border-spacing-not-working.jpg‎ 139.3 kB

How about this example:

<style>
table {
    border-spacing: 2px
}

td {
    width: 1.2in;
    color: #fff;
    background-color: #800080;
}
</style>

<table>
<tr><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
</table>

There was no change in Prince's output with your example.

Edited 17 Nov 2017 by bwoodson

It should give a 2px white gap between the table cells, like this:

1. table.png‎ 96.9 kB