Responsywna tabelka w html/css

Pokażę jak za pomocą css ładnie ostylować tabelę, by była ona responsywna i ładna 🙂
Tabeli używamy dość często, a to by zrobić spis produktów, by napisać cennik usług, czy menu w restauracji. Zwyczajna, surowa, nie ostylowana tabela jest po prostu nie ładna. Dlatego przygotowałam tutorial z kodem, który ucieszy oko 🙂

 

 

W miejsce gdzie chcemy wstawić tabelę dodajemy kod:

<table class="table">
	<tbody>
		<tr>
			<td><strong>Pokoje</strong></td>
			<td><strong>Sezon niski*</strong></td>
			<td><strong>Sezon wysoki*</strong></td>
		</tr>
		<tr>
			<td>Pok&oacute;j 1-osobowy</td>
			<td>220 zł</td>
			<td>364 zł</td>
		</tr>
		<tr>
			<td>Pok&oacute;j 2-osobowy</td>
			<td>260 zł</td>
			<td>399 zł</td>
		</tr>
		<tr>
			<td>Studio (2+2)</td>
			<td>510 zł</td>
			<td>580 zł</td>
		</tr>
		<tr>
			<td>Dostawka</td>
			<td>80 zł</td>
			<td>100 zł</td>
		</tr>
	</tbody>
</table>

Powyżej do table dopisałam klasę którą nazwałam „table”:


<table class="table">

Klasę table dodajemy w stylach css:


.table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1%;
}

.table td,th {
    font-size: 14px;
    border-top: 1px solid #ddd;
    padding: 5px 12px;
    text-align: left;
    vertical-align: top;
}

.table tbody tr:nth-child(even) td {
    background-color: #f3f3f3;
}

Dzięki czemu tabela jest responsywna – ładnie rozciąga się jak zmieniamy rozmiar okna przeglądarki.
width: 100% – tabela jest na całą szerokość strony. Dla lepszego efektu, ustawiłam kolor tła w co drugim wierszu.
Odpowiada za to linijka:

.table tbody tr:nth-child(even) td {
    background-color: #f3f3f3;
}

Tak wygląda ostylowana tabelka:

table1

Podobne wpisy

Subscribe
Powiadom o
guest

13 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Mati
6 lat temu

Dzięki. Przydało się i to bardzo. Super!

Robert
6 lat temu

Witam
Artykuł b. pomocny jednak jako amator zarządzający swoją stroną internetową proszę wskazać miejsce gdzie konkretnie trzeba wstawić klasę tabeli.
Pzdrawiam

Greg
5 lat temu

Wielkie dzięki, tabelka teraz super wygląda!

infomiasto
5 lat temu

Przydatny wpis, już męczę się z tabelą w wordpresie ponad godzinę i nadal nie wygląda to dobrze bo nie działa za dobrze na telefonach. Ale i tak już lepiej dzięki temu wpisowi choć akurat jak dodaję się w table widget facebook to on coś nie reaguje na responsywność.

Pomoc Frankowiczom
4 lat temu

Jak „regulować” szerokość kolumn, tak jak to jest nap. na tej stronie http://www.brynow.pl/rekreacja.php ?

Janek
3 lat temu

Witam, zastanawiam się w którym miejscu w CMS Joomla zapisać styl css i gdzie dodać klasę tabeli . Wiem że w szablonie, ale gdzie ? Tu jest jeszcze kwestia bootstrap

Grand
1 rok temu

Ok, zmieniły się kolory, ale to nie jest responsywna tabela. Jak ona zachowa się na urządzeniu mobilnym?

kasia
kasia
1 rok temu
Reply to  Ewelina

można prosić o link do pozostałych poradników?