I have a HTML code, I want to display on my favorite browser, and I want to remove the row border between the "ABC" cell and the "KLM" cell of this HTML table but I can't manage to do it.
Here is a screenshot of the browser display
The class noborder should work.
.box {
border: 1px solid black;
padding: 10px;
margin: 10px;
text-align: center;
}
.table-container {
width: 50%;
display: inline-block;
text-align: center;
}
table {
font-family: 'Comic Sans MS', cursive;
text-align: center;
margin: 0 auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.noBorder td:last-child {
border-bottom: none;
}
.fantasy {
font-family: 'Fantasy';
}
.times {
font-family: 'Times New Roman';
}
.comics {
font-family: 'Comic Sans MS', cursive;
}
.lightgreen {
background-color: lightgreen;
}<div class="table-container" style="float: left">
<div class='box'>
<table>
<tr>
<td class='fantasy noBorder'>
<font size='5'>ABC </font>
</td>
<td class='comics' rowspan="2">
<font size='15'><b><center>DE</center></font></td>
<td class='comics lightgreen' rowspan="2"><font size='15'><b><center>FG</center></font></td>
<td class='fantasy noBorder'><font size='5'>HIJ </font></td>
</tr>
<tr>
<td class='fantasy'><font size='5'>KLM </font></td>
<td class='fantasy'><font size='5'>NOP</font></td>
</tr>
<tr>
<td class='fantasy'><font size='5'>QRS</font></td>
<td class='comics' colspan="2"><font size='4'><b><center>TUV</center></font></td>
<td class='fantasy'><font size='5'></font></td>
</tr>
<tr>
<td class='comics'><font size='1'><i>WX</font></td>
<td class='comics'><font size='1'><b><center>YZ</center></font></td>
<td class='comics'><font size='1'><b><center>AB</center></font></td>
<td class='comics'><font size='1'><i>CD</font></td>
</tr>
</table>
</div>
</div>
The table cell containing ABC needs the bottom border removed and the cell containing KLM needs the top border removed. I used inline styles to illustrate below, but you could create classes to do the same.