Skip to content
This repository has been archived by the owner on May 30, 2023. It is now read-only.

Table th and td has invisible border when rowspan is set #14190

Closed
notvad opened this issue Apr 11, 2016 · 12 comments
Closed

Table th and td has invisible border when rowspan is set #14190

notvad opened this issue Apr 11, 2016 · 12 comments
Labels

Comments

@notvad
Copy link

notvad commented Apr 11, 2016

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):
`

Artist Album Year Copies sold
2014 2015
Kurt Vile B’lieve i'm goin down 2015 1M 2M
Sufjan Stevens Carrie & Lowell 2015 2M 3M
`

Example 2 - th borders rendered correctly:
`





<th rowspan="1">Album
























Artist Year Copies sold
2014 2015
Kurt Vile B’lieve i'm goin down 2015 1M 2M
Sufjan Stevens Carrie & Lowell 2015 2M 3M
`

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

@avchugaev
Copy link

Confirm. The same problem!

@alextsoi
Copy link

alextsoi commented May 2, 2016

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
Copy link

This temporary solution does not work for me on phantom 2.1.1

@abisz
Copy link

abisz commented Aug 29, 2016

@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
Copy link

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

@wkrueger
Copy link

Workaround worked here, thanks a lot!

@qwefgh90
Copy link

qwefgh90 commented Sep 26, 2016

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

@robinfhu
Copy link

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
Copy link

@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
Copy link

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
Copy link

jdposthuma commented Oct 11, 2017

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 stale bot added the stale label Dec 26, 2019
@stale
Copy link

stale bot commented Dec 29, 2019

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!

@stale stale bot closed this as completed Dec 29, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests