How to delete border spacing in table

Question

I have a table, first row is like

<tr>
<th>1</th>
<th>2</th>
</tr>

I put a black background to "th". Now the 1 and 2 cells have some kind of border between/separating them... I had a look in source code and I think I found something:

border-collapse: separate;
border-spacing: 2px;

This CSS code is listed in source code as "user agent stylesheettable" and I couldn't enable/disable it to test if this is the problem, but I tried and added the same code but with "none" and "0" parameters but it didn't help neither...

Can somebody help and guide me where is the border from please?

score 49 · Accepted Answer · answered Mar 30 '12 at 16:42

49

Your table be like below by default and set the css rules on tables ID or Class

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

css:

border-collapse: collapse;

answered Mar 30 '12 at 16:42

w3uiguru

5,864
2
21
25

thanks, it was the "cellspacing="1" in table properties, so I changed it to "0", my bad) thanks for help – Alexandru Vlas Mar 30 '12 at 16:46
I had to use [`normalize.css`](http://necolas.github.io/normalize.css/) in the end to stop Chrome adding the a `2px` `margin` around my `input` elements. – user692942 Sep 25 '14 at 12:15
what if you still want the borders? but no padding between them? – SuperUberDuper Mar 28 '16 at 17:12
The question was about css, cellspacing em cellpadding are in deprecation (removed from HTML5) and are not css, they are attributes, THIS IS NOT THE CORRECT ANSWER! – Marco Sep 28 '16 at 13:05
2

@Marco: Seeing as HTML5 was not finalized until circa October 2014, **more than 2 years after this question/answer was posted** and the OP did not specify 'HTML5' or 'CSS-only', I would argue that this *is* the correct answer at the time of asking/acceptance. – Steve Jan 19 '17 at 16:41
@SteveG. I agree with you too, but my point was, long before HTML5, doing with CSS was the preferred and more elegant method, don't you agree? Still, I'm just discussing the idea to clarify for everyone that comes here later. Thanks :) – Marco Jan 20 '17 at 11:40

score 15 · Answer 2 · answered Mar 30 '12 at 16:39

15

Set a CSS rule on your table:

table {
    border-collapse: collapse;
}

You can visit this jsFiddle example and switch the border-collapse property from collapse to separate to see how it changes the table's layout. The border-collapse property can only be collapse, separate, or inherited.

answered Mar 30 '12 at 16:39

j08691

204,283
31
260
272

thanks, it was the "cellspacing="1" in table properties, so I changed it to "0", my bad) thanks for help – Alexandru Vlas Mar 30 '12 at 16:46

score 7 · Answer 3 · answered Jul 26 '16 at 12:36

7

Try this

table {
    border: none;
    border-spacing: 0;
}

answered Jul 26 '16 at 12:36

Fury

4,643
5
50
80

score 6 · Answer 4 · answered Mar 30 '12 at 16:42

6

border-collapse: none is invalid. Try border-collapse: collapse.

answered Mar 30 '12 at 16:42

cp3

2,119
2
22
27

thanks, it was the "cellspacing="1" in table properties, so I changed it to "0", my bad) thanks for help – Alexandru Vlas Mar 30 '12 at 16:46
1

yw. It's best to keep styling and spacing in your CSS files. cellspacing and border-collapse has the same result. Leave the formatting of content to CSS. – cp3 Mar 30 '12 at 16:49

score 3 · Answer 5 · edited May 08 '12 at 17:34

you can use border collapse. The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

From http://www.blooberry.com/indexdot/css/properties/table/bcollapse.htm:

In the CSS2 collapsed border model, provision is made for resolution of cases where borders specified for adjacent cells differ and are in conflict:
If any shared border has a component where the 'border' is set to "hidden" for ANY of the sharing members, the common border should be unconditionally set to "hidden".

If any shared border has a component where the 'border' is set to "none", it can be overridden by any other border-sharing member carrying a renderable 'border' property value.

If ALL border-sharing members specify a value of "none" for a border component, only then will the border be set to "none".

If a shared border has a 'border-width' contention, (with no component having a 'border' value of "hidden" of course, the largest border-width should be rendered.

If a shared border has a 'border-style' contention, the suggested priority should be used (decreasing from left to right): "double", "solid", "dashed", "dotted", "ridge", "outset", "groove", "inset."
If a shared border has a 'border-color' contention, the suggested priority should be used (decreasing from left to right): Table cell, table row, row group, column, column group, table.
table
  {
   border-collapse:collapse;
  }
Note

In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge."

CSS2 specified that the initial value for this property was "collapse". Because Mozilla and Opera behave such that the initial value is "separate", CSS2.1 now makes "separate" the official initial value.

How to delete border spacing in table

5 Answers5

Linked

Related