2012
02-28
02-28
table strange border color in firefox
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; }