Use css to set the border of the table and consider compatibility.

In a webpage, table is a good label for displaying data. By default, the table does not have a border, but we often add a border to the table to make it look good. In addition, the border color in IE7/8/9 is different. Let's take a look at how to use css to control the display of the border in the table.
First, 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 time, the table shows almost the same performance in various browsers. I chose

What should we do if we need to add border to each line? If you are smart, you should have thought of the tr tag. That's right. Let's try it and rewrite the css as follows:
[Css]
. My-table {
Border: 1px solid # ccc;
}
. My-table tr {
Border: 1px solid blue;
}
Then refresh the page. Unfortunately, nothing happened. It indicates that writing border on tr does not work. So, let's try the td tag again. We may be pleasantly surprised. Rewrite the css as follows:
[Css]
. My-table {
Border: 1px solid # ccc;
}
. My-table td {
Border: 1px solid blue;
}
Now we can see the new changes. The performance of each browser is basically the same, but what is lacking in the US is that there are spaces between the border of td:

In order to be beautiful, we have to remove the gaps between cells. Use border-collapase: collapase to rewrite css as follows:
[Css]
. My-table {
Border: 1px solid # ccc;
Border-collapse: collapse;
}
. My-table td {
Border: 1px solid blue;
}
Let's see what the current table looks like. Different browsers have different performances. We can see that in chrome and FF, the border of td will replace the outer border of the table, while the outer frame of the table under IE does not change, next time, use a highlighted color to identify the problem.

So how can we achieve consistency? I found that you can increase the width of the outer border of the table. Strictly speaking, we should follow this rule to compare the width of the outer border with the width of td, the border is displayed.
For example, I set the border Width of table and td to 2px and 1px respectively, and then set a comparison between 5px and 4px (note that I have changed the color to a more conspicuous ONE ):

In fact, through experiments, we found that table performance is consistent under various browsers at this time. When writing css, you can use the above Code to ensure the compatibility of most browsers, including IE6.