Layout - Table renders wrong with corrupted syntax or using ::before and ::after elements
Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before-after.html</title>
<style>
@page {
size: 170px 120px;
margin: 10px;
}
html {
font-size: 8px;
line-height: 10px;
text-align: justify;
}
table {
border-collapse: collapse;
width: 100pt;
background: lightblue;
border: 1px solid black;
}
table::before {
content: 'table::before';
display: block;
}
table::after {
content: 'table::after';
display: block;
}
tbody::before {
content: 'tbody::before';
display: block;
}
tbody::after {
content: 'tbody::after';
display: block;
}
tr::before {
content: 'tr::before';
display: block;
}
tr::after {
content: 'tr::after';
display: block;
}
td {
border: 1px solid black;
padding: 4px;
}
tr:first-child td {
border: red 2px solid;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>