css - removing spacing between rows in cells

I have 2 rows and i'm trying to get them to be flushed together in a table. The top cell has an image and the bottom is just text with a cell colored background.

there is a line between them and i'd like to get rid of that line.

any help would be appreciated.

js fiddle - https://jsfiddle.net/w3huqvbg/1/

<table class="mTest" border=0>
    <tr>
        <td><a href=""><img src="http://s8.postimg.org/5y5wc8jqp/test1.png" width="130"></a></td>
        <td><a href=""><img src="http://s8.postimg.org/5y5wc8jqp/test1.png" width="130"></a></td>
        <td><a href=""><img src="http://s8.postimg.org/5y5wc8jqp/test1.png" width="130"></a></td>
    </tr>
    <tr>
        <td class="mSelect"><a href="">text 1</a></td>
        <td><a href="">text 2</a></td>
        <td><a href="">text 3</a></td>
    </tr>
</table>

Answers


Set the padding on the cells to zero:

td {
  padding:0;
}

table.mTest {
  border-spacing: 100px 0px;
  text-align: center;
}
td {
  padding: 0;
}
td.mSelect {
  background-color: #59b1f6;
}
img[width="130"] {
  display: block;
}
<table class="mTest" border=0>
  <tr>
    <td>
      <a href="">
        <img src="http://s8.postimg.org/5y5wc8jqp/test1.png" width="130">
      </a>
    </td>
    <td>
      <a href="">
        <img src="http://s8.postimg.org/5y5wc8jqp/test1.png" width="130">
      </a>
    </td>
    <td>
      <a href="">
        <img src="http://s8.postimg.org/5y5wc8jqp/test1.png" width="130">
      </a>
    </td>

  </tr>
  <tr>
    <td class="mSelect"><a href="">text 1</a>
    </td>
    <td><a href="">text 2</a>
    </td>
    <td><a href="">text 3</a>
    </td>


  </tr>
</table>

Add the following styles and it should do the trick:

tr, td{
  border: none;
  padding: 0;
}

Also td {padding:0} works, you might not want to modify every table on your site. The proper way to do this to your table is cellpadding="0":

<table class="mTest" border="0" cellpadding="0">

https://jsfiddle.net/w3huqvbg/5/

A tables cellpadding is 1 by default.


Need Your Help

Kiosk Mode on non-managed Chromeboxes?

google-chrome-app kiosk kiosk-mode google-chrome-os

I'm trying to turn on Kiosk mode for an non-managed chrome box following the official instructions but when I'm on the chrome://extensions page in developer mode there is no Add kiosk application o...

Loosing active class of bootstrap thumbnail when clicking any other control of the page

jquery css twitter-bootstrap

Loosing css of bootstrap thumbnai link when clicking any other control or page itself