Use CSS to set the table's border, consider compatibility

Table is a good label for displaying data on a Web page. By default, table is not border, but we often have to add border to table for good looks. and IE7/8/9 under border color is not the same, let's see how to use CSS to control the display of table border.
First, we create a simple table with the following code:
[HTML]
<table class= "My-table" >
<tr>
<td>first row</td>
<td>first row</td>
</tr>
<tr>
<td>second row</td>
<td>second row</td>
</tr>
</table>
The initial style is simple:
[CSS]
. my-table {
border:1px solid #ccc;
}
At this point, the table behaves almost the same under each browser, and I chose Chrome's

At this time, if we need to add border to each line, what should we do? Smart you, you should think of the TR tag, yes, let's try, rewrite CSS as follows:
[CSS]
. my-table {
border:1px solid #ccc;
}
. my-table TR {
BORDER:1PX solid blue;
}
Then refresh the next page, unfortunately, nothing has happened. Note that it is not useful to write border on tr. Well, let's try the TD tag again, there might be surprises, rewrite CSS as follows:
[CSS]
. my-table {
border:1px solid #ccc;
}
. my-table TD {
BORDER:1PX solid blue;
}
So we can see the new changes, the browser performance is basically the same, but the drawback is that TD border between the space:

For the sake of aesthetics, we also have to remove the space between the cells, using Border-collapase:collapase, rewrite the CSS as follows:
[CSS]
. my-table {
border:1px solid #ccc;
Border-collapse:collapse;
}
. my-table TD {
BORDER:1PX solid blue;
}
Look at what the table looks like now, different browsers behave differently. As we can see, under Chrome and FF, TD's border will replace table outside the border, and IE under the table outside the box does not change, the next time with a bright color to identify more obvious.

So, how can we achieve consistency? I find that if the width of the outer box of the table is enlarged, it should be strictly followed by a rule that the width of the outer box is compared to the width of the TD and which width displays the border.
For example I set the table and TD border width to 2px and 1px, and then set a 5px and 4px to compare look (note that I have changed the color more eye-catching)

In fact, through the experiment we found that at this time under the various browsers, table performance is consistent. Usually when writing CSS, using the above code, you can guarantee the compatibility of most browsers, including IE6.

