Thinner table borders ?

[Greg01re]

Dear All,

I'm trying for years to have thinner table borders in wkhtmltopdf output. I manage to do it in the header or footer,

as i have a table that spreads on the whole page's width. I declare my table width > 1000px, and the natural

shrinking of the header/footer makes the line thin. Characters are also shrinked.

In the document's body, it's more difficult to do, and anyway the "problem" appears also on vertical table borders.

Has anybody found a way to draw very thin lines on the output (might it be or not table borders) ?

I'm of course using border-collapse: collapse.

Thank you very much for any help

Greg

[mn4367]

No, currently this isn't possible (and I have a similar problem). The same is true for HR elements, they seem to have a fixed minimal stroke width, no matter how thin you make them with CSS.
In some cases you can use an SVG as a background image:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="300mm" height="1mm" xmlns="http://www.w3.org/2000/svg">
  <line x1="0mm" y1="0mm" x2="300mm" y2="0mm" style="stroke:black; stroke-width:0.1mm;" />
</svg>

The width of it is intentionally big so I can use this single image at different places. If it's too wide I clip it with CSS overflow.

[Nigel King]

Hi

Had the same issue when border was set to 1px,
looks like its disobeying border-collapse.

If you set width to a fraction of a pixel, works as expected. 
0.5px works well for me, and look good at all levels of zoom

[Greg01re]

Hi Nigel,

Can you please share your version of wkhtmltopdf ? On which OS do you run it ?

Thanks 

Gregoire

[Sohrab Kehtari]

Running wkhtmltopdf 0.12.2.1 (with patched qt) on OS X.

Here's the CSS I'm using for a hairline border:

.hairline-border {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%'  stroke='black' fill='white' stroke-opacity='1' /></svg>");
}

and I use it mostly on div and table elements.

For a hairline separator, I use:

.hairline {
  height: 0.5mm;
  width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
}

and use it like so:

<div class="hairline></div>

And it's rendered correctly in Firefox and Safari/Chrome, and wkhtmltopdf at least keeps the line width as it is.
There's been some discussion that a base64 of the SVG would warrant greater compatibility on IE, see http://stackoverflow.com/q/10768451/2882550.