I have 3 tables in my Wordpress page and I'm using inline-block to display them horizontally. They look fine except for a strange line at the bottom of each.
I've spent a long time trying to figure it out but I can't. Any help much appreciated. I'll paste an example table and CSS. Thanks for your time.
.summary {
width: 32%;
border: 1px solid #e9b3b3;
border-radius: 10px;
padding: 3px 3px 3px 3px;
display: inline-block;
vertical-align: top;
}
.summary th {
border: 0px;
padding: 3px;
}
.summary td {
border: 0px;
font-size: small;
text-align: left;
padding: 3px;
}
<table class="summary">
<thead>
<tr>
<th colspan="2">Customer Service</th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-730" src="telephone.png" alt="telephone" width="48" height="48" /></td>
<td>01384 999 999</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-731" src="email.png" alt="email" width="48" height="48" /></td>
<td>[email protected]</a> </td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-732" src="text.png" alt="text" width="48" height="48" /></td>
<td>Text HELP</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-733" src="support.png" alt="support" width="48" height="48" /></td>
<td>Live Chat 24/7</td>
</tr>
</tbody>
</table>