CODEWITHSUNDEEP
htmlcss
Dymond
Dymond

Reputation: 2277

remove white spaces between borders in table

I have some spaces between my borders in a table. And I cant figure out why, been trying with negative margin so they overlap each other but the margin doesn't work. since it's a table I have a left border on both td and th. but I also have a space between the side borders and top/bottom border.

This is the fiddle I created.

some table css

.profile-table {
  height: 100%;
}

.profile-table td { 
  text-align:   center;
  border-right: 1px solid #ccc;
  font-size:    1.2em;
}

.profile-table th { 
  text-align:   center;
  border-right: 1px solid #ccc;
  width:        100px;
}

.profile-table tr{ 
}

.profile-table *:last-child{
  border: none;
}

Upvotes: 3

Views: 10611

Answers (3)

Manish Mishra
Manish Mishra

Reputation: 12375

use border-collapse:collapse to merge borders

see this fiddle

Upvotes: 8

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

use this

<table class="profile-table" cellpadding="0" cellspacing="0">
</table>

Demo Here

http://jsfiddle.net/pHVhg/3/

Upvotes: 3

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123418

add border-collapse: collapse; to your table (see MDN reference)

JsFiddle: http://jsfiddle.net/sWC9t/

Upvotes: 3

Related Questions