A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers:
<!DOCTYPE html>
<html>
<head>
<title>Testing table rendering</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
padding: 0;
background-color: #ffffff;
border: 2px solid black;
}
table td {
border: 1px solid black;
padding: 5px;
}
tr.testRow > td {
border-left-width: 0;
border-right-width: 0;
padding: 0;
}
tr.testRow table {
border-color: #ff0000;
}
</style>
</head>
<body>
<table>
<tr>
<td>cell1.1</td>
<td>cell1.2</td>
<td>cell1.3</td>
</tr>
<tr class="testRow">
<td>cell2.1</td>
<td colspan="2">
<table>
<tr>
<td>internal table cell</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Firefox: https://i.sstatic.net/ppwnq.png
Chrome: https://i.sstatic.net/PX8Ub.png
It's noted that Firefox doesn't consider the bottom-right cell's border as part of its content, causing the "internal table" to render slightly to the right of the border of the cell above it. However, Chrome displays the "internal table" aligned with the border of the cell above.
In standard mode for both browsers, which one follows the correct behavior? Additionally, how can modifications be made to the code so that both browsers render the content in the same way as Chrome currently does (preferred behavior)?