Staraj się jak najmniej używać styli wewnątrz kodu html np.:
<td style="...">...</td>)
Atrybuty wewnątrz elementów html oddzielamy spacjami, a nie "średnikami" ( ; )
<td id="e" align="center"; style="width: 20px; ..>
Propozycja zmian (komentarze w kodzie css - zmiana wielkości komórek)
<table>
<thead>
<tr>
<th id="e" rowspan="2">Kraj</th>
<th id="b">Powierzchnia [ha]</th>
<th id="c">Zbiory owoców [t]</th>
<th id="d">Powierzchnia [ha]</th>
<th id="a">Zbiory owoców [t]</th>
</tr>
<tr>
<th colspan="2">2012</th>
<th colspan="2">2013/*</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dania</td>
<td>1 600</td>
<td>8 900</td>
<td>1 600</td>
<td>11 000</td>
</tr>
<tr>
<td>Estonia</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Łotwa</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Finlandia</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Francja</td>
<td>2 000</td>
<td>5 664</td>
<td>2 000</td>
<td>7 000</td>
</tr>
<tr>
<td>Niemcy</td>
<td>1 600</td>
<td>5 000</td>
<td>1 600</td>
<td>8 000</td>
</tr>
<tr>
<td>Węgry</td>
<td>300</td>
<td>600</td>
<td>250</td>
<td>500</td>
</tr>
<tr>
<td>Litwa</td>
<td>2 890</td>
<td>8 000</td>
<td>3 100</td>
<td>8 000</td>
</tr>
<tr>
<td>Holandia</td>
<td>370</td>
<td>2 600</td>
<td>325</td>
<td>2 400</td>
</tr>
<tr>
<td>Norwegia</td>
<td>160</td>
<td>523</td>
<td>160</td>
<td>500</td>
</tr >
<tr class="highlight-darkBlue">
<td>Polska *</td>
<td>26 000</td>
<td>95 000</td>
<td>27 000</td>
<td>95 000</td>
</tr>
<tr>
<td>Ukraina</td>
<td>5 500</td>
<td>28 000</td>
<td>5 800</td>
<td>35 000</td>
</tr>
<tr>
<td>Szwecja</td>
<td>300</td>
<td>750</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>Wielka Brytania</td>
<td>2 400</td>
<td>9 500</td>
<td>2 400</td>
<td>12 000</td>
</tr>
<tr class="highlight-lightGreen row-text-bold">
<td>EUROPA - Razem</td>
<td>43 120</td>
<td>164 537</td>
<td>44 535</td>
<td>179 700</td>
</tr>
<tr>
<td>Australia</td>
<td>78</td>
<td>365</td>
<td>40</td>
<td>200</td>
</tr>
<tr>
<td>Kanada</td>
<td>40</td>
<td>40</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Chiny</td>
<td>3 300</td>
<td>11 000</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Nowa Zelandia</td>
<td>1 500</td>
<td>7 900</td>
<td>1 400</td>
<td>8 300</td>
</tr>
<tr>
<td>USA</td>
<td>120</td>
<td>200</td>
<td>-</td>
<td>-</td>
</tr>
<tr class="highlight-lightkBlue row-text-bold">
<td>Bez Europy - Razem</td>
<td>5 038</td>
<td>19 505</td>
<td>1 440</td>
<td>8 500</td>
</tr>
<tr class="highlight-pacificBlue row-text-bold">
<td>Świat - Razem</td>
<td>48 158</td>
<td>184 042</td>
<td>45 975</td>
<td>188 200</td>
</tr>
</tbody>
</table>
table {
font-size: 0.95em;
border-collapse: collapse; /* border="1 solid black" */
border: 1px solid black; /* border="1 solid black" */
width: 500px;
cursor: default;
}
thead tr {
background-color: #FF99FF; /* tr bgcolor="#FF99FF" */
}
thead th {
/*
ponieważ Table ma ustawione 500px = 100%
masz 5 kolumn co daje 20% na kolumnę ;-)
*/
width: 20%; /* style="width: 30px;" */
text-align: center; /* th align="center" */
font-weight: bold; /* <b>Kraj</b> itd. */
line-height: 0.6em; /* zmniejszanie-zwiększanie komórek nagłówka */
}
thead th, tbody td {
border: 1px solid black; /* border="1 solid black" */
padding: 8px; /* table cellpadding="8" */
}
tbody td {
text-align: center; /* td align="center" */
line-height: 0.6em; /* zmniejszanie-zwiększanie komórek */
}
tbody td:first-child {
text-align: left; /* kolumna Kraj */
}
.highlight-darkBlue {
background-color: #000066; /* tr bgcolor= #000066 */
color: white; /* td style="color:white" */
}
.highlight-lightkBlue {
background-color: #6699FF; /* tr bgcolor= #6699FF */
color: black;
}
.highlight-pacificBlue {
background-color: #0099CC; /* tr bgcolor= #0099CC */
color: black;
}
.highlight-lightGreen {
background-color: #66FF33; /* tr bgcolor= #66FF33 */
color: black;
}
.row-text-bold {
font-weight: bold; /* <b>EUROPA - Razem</b> */
}
/* BONUS ;-) */
tbody tr {
transition: all 0.45s;
}
tbody tr:not([class^="highlight-"]):hover {
background-color: gray;
color: white;
}
tbody tr[class*="darkBlue"]:hover,
tr[class*="lightGreen"]:hover {
background-color: #6699FF;
color: black;
}
[ HTML Tables ] [ CSS Selector Reference ]