Extra line at bottom of a table

12 Views Asked by At

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>

0

There are 0 best solutions below