CODEWITHSUNDEEP
htmlcss
Baruch
Baruch

Reputation: 21498

HTML tr background color without collapsing borders

I want to put a background color on a whole <tr>. I tries it, and got white gaps between cells. I found many answers like this suggesting collapsing the table's borders. However, I don't want the borders collapsed! I want the borders on all other rows, just no on this one colored row (or more accurately, I want the spacing of the borders even in this row, but the BG color should include the spacing)

Here is the fiddle: http://jsfiddle.net/qEg9L/1/ . As you can see, the rest of the table's cells are various colors, and the border helps to distinguish them. Only the top row is a solid color, and I don't want the borders

Upvotes: 0

Views: 6954

Answers (3)

Sohil Desai
Sohil Desai

Reputation: 2988

just add this style to table like this

<table style='border-spacing:0px'>
    // your code.
</table>

Upvotes: 0

Danield
Danield

Reputation: 125551

Use border-collapse: collapse; but then add your own border

EDIT (now that you posted your fiddle)

UPDATED FIDDLE

table{
    border-collapse: collapse;
  }
table td{
    border: 1px solid white;
  }

FIDDLE

<table>
  <tr class="withBack">
    <td>test</td>
    <td>test</td>
  </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>


  table{
    border-collapse: collapse;

  }
  table td{
    border: 5px solid green;
    padding: 10px 20px;
  }
.withBack
{
    background: pink;
}
.withBack td
{
    background: pink;
    border: 5px solid pink;
}

Upvotes: 8

Sarge
Sarge

Reputation: 408

Add a css file to color only td tags, then youll be able to see borders.

Upvotes: 0

Related Questions