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

Subscribe
Powiadom o
guest
5 komentarzy
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mati
2 lat temu

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

Robert
2 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
1 rok temu

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

infomiasto
10 miesięcy 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ść.