2012
02-28
02-28
table border dziwny kolor pod firefox
Problem:
Możliwe że zastanawiałeś się czemu jeśli ustawisz table border color na np #F00 to pod różnymi przeglądarkami dostajesz różne kolory.Zabawne 🙂
Przykład:
<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 |
Możesz obejrzeć ten post pod różnymi przeglądarkami by zobaczyć efekt.
Solution Beta:
Jedno rozwiązanie to dodać border-style:solid; i kolor do table i każdego 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 |
Ale to stanowczo za dużo pisania i co kopiowanie kodu.
Solution:
Dodaj ponirzszy kod do pliku CSS includowanego na początku każdej podstrony:
table, tbody, tr, th, td{ border-style: solid; border-width: 0px; } tbody, tr, th, td{ border-color: inherit; }