How do I remove the double border on this table?

Question

I am working on the HTML and CSS and I get this result which is not perfect:

Answer 1

Go the source code of that markup you like, select "View Page Source", copy the code, paste it and then style it and make it original yourself. You don't want to be too close to other peoples designs anyways.

Answer 2

I have modified a little bit on your fiddle with border-collapse:collapse

JS Fiddle

hope it help

Answer 3

How do I remove the double border on this table?

1 . To remove the double-border look of a table

Just edit your table tag as following:

<table cellspacing="0" border="1"> ...</table>

To give color to the borders add : bordercolor="#00F"

Demo

But cellpadding, cellspacing,border etc of a table are Deprecated Attributes.Instead you can use the CSS styles equivalent to the above from the following table:

---

2 . To remove the double-border look of a table and to obtain the exact output as the image shown in the question

Best solution : Use border-collapse:collapse; for the <table> element.

Answer 4

Add the border-collapse:collapse; to the table css selector. This will eliminate that nested border look. Also, your Text:align:center; should really be text-align:center;

Fiddle: http://jsfiddle.net/GParb/1/

CSS

table{
    width:100%;
    border-collapse:collapse;
    text-align:center;
    border:1px solid #00F;
    font-size:12px;
    }

Unlike the cellspacing="0" as suggested below, this answer will collapse the borders to not be a 3D effect, just like what the OP asked for.

Comparison fiddle: http://jsfiddle.net/GParb/7/