Forum Bugs

Table cell borders have extra hairline border

bwoodson
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.jpg60.5 kB
mikeday
Drawing white over other colors is problematic for printed output; ideally it's best to avoid a white border and use border-spacing instead.
bwoodson
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.jpg139.3 kB
mikeday
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>
bwoodson
There was no change in Prince's output with your example.

Edited by bwoodson

mikeday
It should give a 2px white gap between the table cells, like this:
table.png
  1. table.png96.9 kB