I have created a crossword puzzle generator that arranges words by rows and fills each cell with one letter. The keywords are distinguished by a wider border and a gray background, as shown in this image.
Here is the general structure of my code:
#crossword {
border-spacing: 0px;
border-collapse:collapse;
}
.word {
vertical-align: middle;
align-items: center;
text-align: center;
justify-content: center;
margin: 0;
padding: 0;
}
.cell {
width: 30px;
height: 30px;
margin: 0;
padding: 0;
}
.letter {
border: 1px solid black;
}
.keyword {
border-width: 2px;
background-color: gray;
}<table id="crossword">
<tr class="word">
<td class="cell letter">W</td>
<td class="cell letter keyword">C</td>
<td class="cell letter">A</td>
</tr>
</table>In my current implementation, the issue I am facing (as highlighted by red ellipses in the image) is that the top and bottom lines within the keyword cells extend beyond the borders of other cells. Removing the border-collapse property caused double borders at row connections.
Although I currently use table, trs, and tds for generation, I am open to switching to divs if it offers a solution.
So, here is my question: How can I ensure that the top and bottom borders remain inside the keyword cells instead of extending beyond them while uniquely addressing each cell?
I did find a workaround involving box-shadow, but it's not universally supported across all browsers and involves complex styling, so I would prefer an alternative approach if possible.