Responsywna tabelka w html/css

table2Pokażę 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

Has one comment to “Responsywna tabelka w html/css”

You can leave a reply or Trackback this post.

Write a Reply or Comment

Your email address will not be published.