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
4 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
3 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
11 miesięcy temu

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

kasia
kasia
10 miesięcy temu
Reply to  Ewelina

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