Forum Bugs

table border / background issues

rafael
Hi,

I'm trying to export a table to pdf and am seeing a few border / cell background issues:

1. cell backgrounds bleeding under borders into adjacent cells
2. cell border taking precedence over tbody border
3. cell with hidden content spilling over borders

Attached are captures of the same table rendered in the browser, and in the pdf output.
PDF:
pdf_table_border_issues.PNG

BROWSER:
browser_table_no_border_issues.PNG


The simplified / relevant html and css looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        html, body {
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }
        table {
            border: 2px solid black;
            border-collapse: collapse;
        }
        td {
            border: 1px solid #cccccc;
            padding: 2px 4px;
        }
        tbody {
            border: 2px solid black;
        }
        .status {
            text-align: center;
            font-weight: bold;
        }
        .status .tooltip-text {
            text-align: left;
            padding: 0 1em;
            width: max-content;
            right: 20%;
            top: 20%;
        }
        @media print {
            .status .tooltip-text {
                display: none;
            }
        }
        .pass {
            background-color: green;
            color: white;
        }
        .pass.data {
            background-color: inherit;
            color: inherit;
        }
        .blank,
        .blank.data {
            background-color: lightgray;
            color: black;
        }
        .near,
        .near.data {
            background-color: yellow;
            color: black;
        }
        .fail,
        .fail.data {
            background-color: red;
            color: white;
        }
        .inconsistent,
        .inconsistent.data {
            background-color: orange;
            color: black;
        }
        .tooltip {
            position: relative;
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.6s;
        }
        .tooltip .tooltip-text {
            visibility: hidden;
            position: absolute;
            background-color: #555;
            color: #fff;
            padding: 5px 0;
            border-radius: 6px;
            z-index: 1;
            opacity: 0;
            transition: opacity 1s, visibility 1s;
        }
    </style>
</head>
<body>
<table>
    <tbody>
    <tr>
        <td class="data test min pass">89.77</td>
        <td rowspan="3" class="status pass">PASS</td>
    </tr>
    <tr>
        <td class="data test typ">91.22</td>
    </tr>
    <tr>
        <td class="data test max pass">93.06</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td class="data test min fail">80.60</td>
        <td rowspan="3" class="status pass fail">FAIL</td>
    </tr>
    <tr>

        <td class="data test typ">95.73</td>
    </tr>
    <tr>
        <td class="data test max pass">97.51</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td class="data test min">&nbsp;</td>
        <td rowspan="3" class="status blank">BLANK</td>
    </tr>
    <tr>
        <td class="data test typ">&nbsp;</td>
    </tr>
    <tr>
        <td class="data test max">&nbsp;</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td class="data test min near">78.73</td>
        <td rowspan="3" class="status pass near inconsistent tooltip">
            <span class="tooltip-text">long content for tool tip</span>
            FAIL
        </td>
    </tr>
    <tr>
        <td class="data test typ">106.69</td>
    </tr>
    <tr>
        <td class="data test max pass">119.74</td>
    </tr>
    </tbody>
</table>
</body>
</html>

  1. browser_table_no_border_issues.PNG28.2 kB
    browser without border issues
  2. pdf_table_border_issues.PNG33.3 kB
    pdf with border issues
mikeday
Thanks, we will investigate this issue.
mikeday
It appears to be due to the "FAIL" table cell having "position: relative", and this issue appears to affect Firefox as well, although not Chrome.
rafael
hmm ok, digging into the css spec a little deeper it seems position:relative is not really defined for table-cell display, so I guess I'll need to figure out a workaround with some container divs inside...

any thoughts on the other two issues with the bleeding backgrounds and border priority?
mikeday
We will take a look, the collapsing border model is tricky to get right.