On my HTML page, I have included an image which showcases a table. However, there seems to be an issue with the borders of the table - the vertical lines are not appearing as expected and instead showing around each button. Additionally, the horizontal lines are being cut between each cell, potentially due to margin settings. How can I ensure that the horizontal lines are continuous and the vertical lines display properly? Any insights into what may be causing this problem?
Below is the HTML code snippet:
<div id="wrapper">
</div>
<table>
<tr>
<td width="188px" class="button" ><img src="b2.png" /></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ><img src="b1.png" /></td>
<td width="188px" class="button" ></td>
</tr>
</table>
Here is the corresponding CSS code:
.button {
width:180px;
text-align:center;
background:rgb(51,153,51);
position:relative;
overflow:hidden;
margin-top:1px;
margin-bottom:1px;
margin-left:1px;
margin-right:12px;
float: left; /* add this */
}
table td {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border:1.0px solid #000;
}
Any assistance in resolving this issue would be greatly appreciated!