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?

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;

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.

Answer 3

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

Answer 4

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.

Answer 5

Try this

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