Tło wystaje poza zaokrąglone rogi w tabeli

0

Witam,
Utworzyłem tabelę zawierającą pewne dane i chciałem, aby tabela miala zaokrąglone rogi (topleft, topright, bottomright).
Pierwszy wiersz tabeli zawiera argument colspan='15', gdyż jest to wiersz nagłówkowy i ma ustalone tło na #DDD (taki sam kolor ma obramowanie)
Niestety, tło tego elementu wychodzi poza zaokrąglone rogi.
W jaki sposób można pozbyć się tego problemu?

<table style='width: 1230px;'><thead><tr style='background-color: #ddd'><td colspan='15'>Obrońcy</td></tr><tr>...</tr></thead>...</table>
table {
   border-spacing: 0px;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px
}

user image

0

uroki tabelek ;)
być może tak nawet w specyfikacji jest [że to nie ramka i jej kształt ogranicza widoczność innych elementów - dzieci], bo działa to tak wszędzie-tylko-nie-na-webkicie.
pomóc może takie małe oszustwo: http://jsfiddle.net/P7E7m/1/ - tylko dół trzeba podobnie dopracować

0

Ten pomysł jest fajny, ale ma pewną wadę.
Tło w danym kolorze będzie miał tylko GŁÓWNY wiersz nagłówkowy.

Dodam, że u kolegi na Chrome całość działa. U mnie na FF nie.

<table style='width: 1230px; border-spacing: 0px; border: 3px solid #ddd; border-top-left-radius: 20px;  border-top-right-radius: 20px; border-bottom-right-radius: 20px'>
<thead style=''>
<tr style='background-color: #ddd;'>
<td colspan='15' style='font-size: 120%; -moz-border-radius-topleft: 15px; border-top-right-radius: 15px; border-top-left-radius: 15px; text-transform: uppercase; text-align: center;'>Obrońcy</td></tr>
<tr style='border-bottom: 1px solid black'><td rowspan='1' style='width: 200px'><b>Nazwa</b></td><td rowspan='1' style='width: 50px'><b>SiÅ‚a</b></td><td style='width: 300px'><b>Drużyna</b></td><td style='width: 125px'>DMG</td><td>Berki</td><td>Hity</td><td colspan='6' style='text-align: center'>Weapons*</td><td style='width: 90px'>W regionie</td><td style='width: 50px'>Ordy</td></tr><tr><td colspan='6'>&nbsp;</td><td>No</td><td>Q1</td><td>Q2</td><td>Q3</td><td>Q4</td><td>Q5</td></tr></thead>
0

Innej drogi nie ma.

Dodam, że u kolegi na Chrome całość działa. U mnie na FF nie.

No przecież pisałem o tym:

bo działa to tak wszędzie-tylko-nie-na-webkicie

Webkit to silnik Chrome i nowej Opery.

Tylko skoro to działa w ten sposób tylko i wyłącznie na webkicie - to zakładam, że to akurat błąd Chrome, niż IE, FF, Opery na silniku Presto.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0