2012
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:
  1.  
  2. <table border="1" style="border-width:10px;border-color:#F00" >
  3. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  4. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  5. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  6. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  7. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  8. </table>
  9.  

some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome 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.
  1.  
  2. <table border="1" style="border-style:solid; border-width:10px;border-color:#F00" >
  3. <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>
  4. <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>
  5. <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>
  6. <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>
  7. <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>
  8. </table>
  9.  

some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome 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:
  1.  
  2. table, tbody, tr, th, td{
  3. border-style: solid;
  4. border-width: 0px;
  5. }
  6.  
  7. tbody, tr, th, td{
  8. border-color: inherit;
  9. }
  10.  
Jeszcze brak komentarzy.

Zostaw odpowiedź

  ( Ctrl+Enter )