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:
BROWSER:
The simplified / relevant html and css looks like this:
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:
BROWSER:
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"> </td>
<td rowspan="3" class="status blank">BLANK</td>
</tr>
<tr>
<td class="data test typ"> </td>
</tr>
<tr>
<td class="data test max"> </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>