Problem ze stylizowaniem tabeli HTML+CSS

Question

Mam taki kawałek kodu HTML:

<tr>
   <td>Nazwa</td>
   <td>Waga [kg]</td>
   <td>Długość [m]</td>
   <td>Suma pow. [m<sup>2</sup>]</td>
</tr>

CSS:

tr:first-child td
{
	background-color: #474747;
}

td:first-child
{
	background-color: grey;
}

table
{
	border: 2px solid black !important;
	border-collapse: collapse;
}

td
{
	 border: 1px solid black;
	 background-color:  lightgrey;
	 padding: 10px;
	 margin: 0;
}

W ostatniej komórce, tam gdzie jest użyty tag <sup> na dole pojawia się mały margines (jak na zdjęciu). Problem znika kiedy usunę tag sup. Co powoduje taki błąd? Jak go naprawić?

Answer 1

Dopisz selektor sup w swoim arkuszu styli i daj mu padding i margin równy zero

Comments

Próbowałem już tego, niestety nie działa

Answer 2

Odtworzyłem ten kod u siebie i działa normalnie, bez dodatkowego marginesu.

Na czym to przeglądasz?

Spróbuj może dodać dla <sup> position: absolute,

a w miejscu gdzie zrobiłem * dodaj spację:

<td>Suma pow. [m²]*</td>

żeby było miejsce dla <sup>, która przy position absolute nie zajmuje miejsca i bez tej spacji nachodzi na .resztę tekstu.

Comments

Podałem spację nie w tym miejscu co trzeba.

Zamiast spacji, która nie jest dokładna łatwiej tak zrobić:

           <td>Suma pow. [m<sup>2</sup><span>]</span></td>

w css dodać to:

sup {
position: absolute
}
td span {
margin-left: 7px
}

Jeśli margines 7px nie będzie wystarczający to należy dostosować