Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong width of <TD> when using border-collapse and a <div> element #73

Closed
stollr opened this issue Jan 29, 2016 · 5 comments
Closed

Wrong width of <TD> when using border-collapse and a <div> element #73

stollr opened this issue Jan 29, 2016 · 5 comments
Labels

Comments

@stollr
Copy link

stollr commented Jan 29, 2016

Hi.
I have found a bug, when having a table with border-collapse: collapse and there is a

element in one of the cells.
You can reproduce the issue with this snippet:

<style type="text/css">
    table {border-collapse: collapse;}
    .table-bordered {border-width: 0.25mm; border-style: solid; border-color: #aaaaaa;}
</style>
<page backtop="5mm" backbottom="5mm" backleft="5mm" backright="5mm">
    <table>
        <tr>
            <th class="table-bordered" style="width: 20mm;">0 0</th>
            <th class="table-bordered" style="width: 21mm;">0 1</th>
            <th class="table-bordered" style="width: 22mm;">0 2</th>
        </tr>
        <tr>
            <td class="table-bordered"><div>1 0</div></td>
            <td class="table-bordered">1 1</td>
            <td class="table-bordered">1 2</td>
        </tr>
    </table>
</page>

The result of this code looks like this:
with-collapse
The first column is stretched over the whole page, because of the <div>element in the table cell.
But if you remove the table {border-collapse: collapse;} the table is rendered correctly. See:
without-collapse

I tried to debug the code and find out why this happens. But I was unsuccessful. So I hope you are more successful and can fix the issue @spipu ;-)

@juchi juchi added the bug label Jan 29, 2016
@spipu
Copy link
Owner

spipu commented Jan 29, 2016

it is because you do not put any width to the div.
You must specify the width of the divs for HTML2PDF. If you do not specify it, HTML2PDF use all the page's width.

It was not possible to determine the possible width of a diff without any performance pb.

@stollr
Copy link
Author

stollr commented Jan 29, 2016

In CSS a block element inherits the width from its parent element. In this case the parent element is the TD. It would be nice if this behaviour could be implemented ;-)

But I wonder why the DIV does not use the whole page width when border-collapse: collapse is not used.

@spipu
Copy link
Owner

spipu commented Mar 2, 2016

we have to look at why it works without collapse...

@stollr
Copy link
Author

stollr commented Mar 3, 2016

Yes. I tried to do that, but it was too confusing :-/

spipu added a commit that referenced this issue May 18, 2017
@spipu
Copy link
Owner

spipu commented May 18, 2017

There was a little bug on the div position, it is fixed on master branch.

Now it works with this :

<style type="text/css">
    .table-bordered {border-width: 0.25mm; border-style: solid; border-color: #aaaaaa;}
</style>
<page backtop="5mm" backbottom="5mm" backleft="5mm" backright="5mm">
    <table>
        <col class="table-bordered" style="width: 20mm;">
        <col class="table-bordered" style="width: 21mm;">
        <col class="table-bordered" style="width: 22mm;">
        <tr>
            <th>0 0</th>
            <th>0 1</th>
            <th>0 2</th>
        </tr>
        <tr>
            <td><div>1 0</div></td>
            <td>1 1</td>
            <td>1 2</td>
        </tr>
    </table>
    <table style="border-collapse: collapse;">
        <col class="table-bordered" style="width: 20mm;">
        <col class="table-bordered" style="width: 21mm;">
        <col class="table-bordered" style="width: 22mm;">
        <tr>
            <th >0 0</th>
            <th>0 1</th>
            <th>0 2</th>
        </tr>
        <tr>
            <td><div>1 0</div></td>
            <td>1 1</td>
            <td>1 2</td>
        </tr>
    </table>
</page>

@spipu spipu closed this as completed May 18, 2017
icebird93 pushed a commit to EduBase/html2pdf that referenced this issue Jun 18, 2018
aaryarajojuH added a commit to aaryarajojuH/spipu that referenced this issue Feb 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants