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?

Partner

Answer 1

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;

Cybele

thanks, it was the "cellspacing="1" in table properties, so I changed it to "0", my bad) thanks for help – Partner

I had to use normalize.css in the end to stop Chrome adding the a 2px margin around my input elements. – Lippe

what if you still want the borders? but no padding between them? – Rosel

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! – Optometrist

@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. – Boast

@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 :) – Optometrist

Answer 2

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.

Dilatant

thanks, it was the "cellspacing="1" in table properties, so I changed it to "0", my bad) thanks for help – Partner

Answer 3

Try this

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

Highoctane

Answer 4

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

Isogonic

thanks, it was the "cellspacing="1" in table properties, so I changed it to "0", my bad) thanks for help – Partner

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. – Isogonic

Answer 5

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:

1. 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".

2. 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.

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

4. 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.

5. 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."

6. 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

1. In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge."
2. 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.

Malicious