Currently, I am in the process of enhancing an existing servlet to improve its appearance. One of the challenges I faced was trying to remove the border between two cells in a complex table to make it look more visually appealing. Despite my attempts to define a CSS rule for this purpose, I have been unsuccessful. I then experimented with changing the cell border color, but encountered another setback. It seems like there may be some priority issues with the CSS rules that I'm finding difficult to resolve.
Here is a visual representation of what I am aiming to achieve:
https://i.sstatic.net/hbrXn.png
To showcase the issue clearly, below is a minimal reproducible example:
<html>
<head><style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border-left: none; }
</style></head>
<body>
<table class='rule'>
<tr class="all"><td>XX</td></tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td></tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
</body>
</html>