table border color in css
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 |
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 |
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;
}