Peter Sobieraj

Problem:

You can find your self wondering why if you put border to table let say color #F00 it have different colors at different borwsers.
Funny 🙂
Example:

 
<table border="1" style="border-width:10px;border-color:#F00" >
 <tr><td>some data</td><td>some data</td><td>some data</td></tr>
 <tr><td>some data</td><td>some data</td><td>some data</td></tr>
 <tr><td>some data</td><td>some data</td><td>some data</td></tr>
 <tr><td>some data</td><td>some data</td><td>some data</td></tr>
 <tr><td>some data</td><td>some data</td><td>some data</td></tr>
</table>
 

some data	some data	some data
some data	some data	some data
some data	some data	some data
some data	some data	some data
some data	some data	some data

You can check that post in different browsers and see for your self.

Solution Beta:

One solution to correct that is to add border-style:solid; and your color for table and every tr and td.

 
<table border="1" style="border-style:solid; border-width:10px;border-color:#F00" >
 <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
 <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
 <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
 <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
 <tr style="border-style:solid; border-width:10px;border-color:#F00"><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
</table>
 

some data	some data	some data
some data	some data	some data
some data	some data	some data
some data	some data	some data
some data	some data	some data

But it is quit hard work.

Solution:

add that few lines to begin of css file included as first css on every page:

 
table, tbody, tr, th, td{
	border-style: solid;
	border-width: 0px;
}
 
tbody, tr, th, td{
	border-color: inherit;
}