Phantomjs: Table th and td has invisible border when rowspan is set

[notvad]

I'm using PhantomJS 2.1.1 and have problem when rendering table in PDF format.
If table has two or more th or td elements with rowspan set to 2 or higher - border between these elements is not visible disregarding CSS styles. The problem occurs only if cells has the same rowspan greater than 1 and these cells are located one after another.

Here are two examples:
Example 1 - th borders rendered _incorrectly_ (border is invisible):
<table> <thead> <tr> <th rowspan="2">Artist</th> <th rowspan="2">Album</th> <th rowspan="2">Year</th> <th colspan="2">Copies sold</th> </tr> <tr> <th>2014</th> <th>2015</th> </tr> </thead> <tbody> <tr> <td>Kurt Vile</td> <td>B’lieve i'm goin down</td> <td>2015</td> <td>1M</td> <td>2M</td> </tr> <tr> <td>Sufjan Stevens</td> <td>Carrie & Lowell</td> <td>2015</td> <td>2M</td> <td>3M</td> </tr> </tbody> </table>

Example 2 - th borders rendered _correctly_:
<table> <thead> <tr> <th rowspan="2">Artist</th> <th **rowspan="1"**>Album</th> <th rowspan="2">Year</th> <th colspan="2">Copies sold</th> </tr> <tr> <th></th> <th>2014</th> <th>2015</th> </tr> </thead> <tbody> <tr> <td>Kurt Vile</td> <td>B’lieve i'm goin down</td> <td>2015</td> <td>1M</td> <td>2M</td> </tr> <tr> <td>Sufjan Stevens</td> <td>Carrie & Lowell</td> <td>2015</td> <td>2M</td> <td>3M</td> </tr> </tbody> </table>

I've attached two files with rendered PDF files for example 1 and 2.
example1.pdf
example2.pdf

[avchugaev]

Confirm. The same problem!

[alextsoi]

My temporary solution until fix in coming versions will be adding a pseudo element for the rowspan.
.table-cell{
position: relative;
}
.table-cell:before{
position: absolute;
content: "";
top: 0;
left: -1px;
background-color: black;
width: 1px;
height: 100%;
}

[pavoldobrucky]

This temporary solution does not work for me on phantom 2.1.1

[abisz]

@pavoldobrucky you have to remove the comments. They are not CSS syntax so the last 4 lines get ignored.
@alextsoi thanks for the hack, worked fine! could you maybe fix the comments for all of us who just copy paste? ;)

[alextsoi]

@abisz is it ok now? I didn't test it.

[wkrueger]

Workaround worked here, thanks a lot!

[qwefgh90]

Thank you for your help.
css hack works for me (phantom 2.1)

[robinfhu]

Thanks @alextsoi
The CSS hack did work.

I encountered the same issue using PhantomJS version 2.1.1, where a rowspan on a table cell would print invisible borders.

[sandipbgt]

@alextsoi , Thank you very much.
I had to modify the CSS slightly to make it work. Just made the background-color important.
I encountered the same issue while converting html to pdf using wkhtmltopdf in Django.

.table-cell {
position: relative;
}

.table-cell:before {
position: absolute;
content: "";
top: 0;
left: -1px;
background-color: black!important;
width: 1px;
height: 100%;
}

[AnthonyBSDE]

Hi everyone !

Try this code css :

            .table-cell {
                position: relative;
            }
            .table-cell:before {
                position: absolute;
                content: "";
                top: -1px;
                left:-1px;
                background-color: transparent;
                border: solid #ddd 1px;
                width: calc(100% + 2px) ;
                height: calc(100% + 2px);
            }

[jdposthuma]

What a landmine. Love this project though!

Here's a modified version of @AnthonyBSDE 's code that worked for me:

        td[rowspan] {
            position: relative;
        }

        td[rowspan]:before {
            position: absolute;
            content: "";
            top: -1px;
            left: -1px;
            background-color: transparent;
            border: solid #666 1px;
            width: 100%;
            height: 100%;
        }

[stale[bot]]

Due to our very limited maintenance capacity, we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed (see #15395 for more details). In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!