CSS control table inside and outside borders, colors, size sample

In the default case, our CSS will be the table's border removed, below to share with you under the CSS control table inside and outside the border, color, size style, want to learn from friends can refer to the

 

In fact, according to Common sense, now the site should have abandoned what form, now must be div+css in the mainstream! But the customer's website is always dissatisfied with the border effects when adding content: either no, or it's rough. I can see that the client is a perfectionist.

By default, our CSS clears the borders of the table, which is not, and see the effect is this.

No border table

To give a table with a border, I wrote this in CSS:

. table{border:solid 1px #add9c0;}

Hey, it seems that I was naïve, the browser to see the effect is this:

Table with outer border only

Well, I admit that I haven't moved a table in some years, but it's not my responsibility at all, because the table has been abandoned by the public designers. So I deleted the CSS style and wrote the same sentence again:

. td{border:solid 1px #add9c0;}

But the cup is still happening, such as the customer requirements such a small person, how can endure table table of the inner border so thick?

Table with a thick inner border

There is no way, had to put out a trick, delete just write CSS code, write directly:

. td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
. table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Okay, so you dare to look arrogant? Isn't that a good way to go?

Table with a very thin border

Intimacy is not a sin, but the text content and table borders close to no gaps on the impact of beauty, and then the two lines of code just slightly modified:

Td{border:solid #add9c0; border-width:0px 1px 1px 0px padding-left:10px;}
. table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

If you need TD on both sides do not need to be so close, so write:

Td{border:solid #add9c0 border-width:0px 1px 1px 0px padding:10px 0px;
. table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

OK, now look at the final effect bar, this time the customer has been very happy, he wants is this effect!

Table of Ideal effect

If you use such a method elsewhere, be sure to note the specification of the CSS code:

Recommended wording: border-width:0px 1px 1px 0px;

Not recommended: border-width:0 1 1 0;

Finally, I would like to remind you that you can not use the table as far as possible to avoid using Talbe bar, after all, not how advanced technology, should try to div+css this aspect of efforts!