CODEWITHSUNDEEP
htmlcsshtml-table
Lacer
Lacer

Reputation: 5958

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>

Upvotes: 0

Views: 67

Answers (3)

CoderPi
CoderPi

Reputation: 13211

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.

Upvotes: 1

j08691
j08691

Reputation: 207861

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>

Upvotes: 1

Suthan Bala
Suthan Bala

Reputation: 3299

Add the following styles and it should do the trick:

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

Upvotes: 1

Related Questions