CODEWITHSUNDEEP
htmlcss
Malasorte
Malasorte

Reputation: 1173

Extra space when styling a table with CSS

As part of redesigning a site, I am trying to style a table with css.

<table width="100%" cellpadding="0" cellspacing="0" border="0">

I ended up with this:

<table class="table1">

.table1 {
width: 100%;  
border: none;
border-spacing: 0;
border-collapse: colapse;
padding : 0;
}

The weird problem: when applying the css style to the table, the result is slightly different. The space between cells is slightly larger.

Please see the jsfiddles:

Table not style with css: http://jsfiddle.net/32534/1/ Table styled with css: http://jsfiddle.net/47AUR/1/

Why the extra space between the text inputs? What am I doing wrong?! Thank you!

Edit: Using Google Chrome.

Upvotes: 0

Views: 122

Answers (4)

user1180790
user1180790

Reputation:

cellpadding affects td padding too, so simply add:

.table1 td{
    padding: 0;
}

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

it will work with a padding:0 on the td (as that is what the cellpadding affects) elements and a second l to colapse

demo at http://jsfiddle.net/at4yL/

Upvotes: 0

Abdelrahman Wahdan
Abdelrahman Wahdan

Reputation: 2065

Simply add

td { 

padding: 0px;

}

Upvotes: 0

Ani
Ani

Reputation: 4523

By default chrome adds it's default styling:

`border-spacing: 2px;` on the table.

In http://jsfiddle.net/32534/1/ you haven't mentioned any styling for table. Hence it's picking up default style of chrome.

But in next fiddle link: http://jsfiddle.net/47AUR/1/ you have specifically mentioned the style for the table, which overwrites the default style of chrome.

It's a good idea to use reset.css to be consistent across all browser's and ignore the default styling of all browser's

Upvotes: 0

Related Questions