Responsywna tabela RWD w html + css - Tworzenie stron

Post published:15 marca 2023
Post category:webmaster
Post comments:0 Komentarzy

You are currently viewing Responsywna tabela RWD w html + css

Wpisów na blogu o tabelach mam ze 2, ten będzie trzeci, ale jeszcze bardziej podrasowany, z elastyczną tabelą i ciekawie wyglądającą, zwłaszcza w wersji mobilnej. Tabela jest ładnie skalowana, a na telefonie poukładana w kolumny z danymi, jedna pod drugą.

Dodajemy kod html

W <body> </body> wstawiamy kod tabeli:

    <table>
        <thead>
            <tr>
                <th scope="col">Imię</th>
                <th scope="col">Data urodzenia</th>
                <th scope="col">Wiek</th>
                <th scope="col">Miasto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Imię">Ola</td>
                <td data-label="Data urodzenia">05/06/1999</td>
                <td data-label="Wiek">24</td>
                <td data-label="Miasto">Warszawa</td>
            </tr>
            <tr>
                <td scope="row" data-label="Imię">Sylwia</td>
                <td data-label="Data urodzenia">10/02/1980</td>
                <td data-label="Wiek">43</td>
                <td data-label="Miasto">Bydgoszcz</td>
            </tr>
            <tr>
                <td scope="row" data-label="Imię">Marek</td>
                <td data-label="Data urodzenia">18/09/2005</td>
                <td data-label="Wiek">18</td>
                <td data-label="Miasto">Wrocław</td>
            </tr>
            <tr>
                <td scope="row" data-label="Imię">Kamil</td>
                <td data-label="Data urodzenia">02/05/1991</td>
                <td data-label="Wiek">32</td>
                <td data-label="Miasto">Kraków</td>
            </tr>
        </tbody>
    </table>

Myślę, że jest jasne, co i gdzie wstawić. Wystarczy podmienić dane na swoje. Nagłówki oraz dane. W powyższym kodzie są 4 kolumny i 5 wierszy (łącznie z nagłówkami).

Dodajemy kod css

table {
    font-family: "Roboto", Tahoma, sans-serif;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
}

table tr {
	background-color: #F7F7F7;
	border: 1px solid #dbdbdb;
	padding: 0.35em;
}

table th,
table td {
	padding: 0.625em;
	text-align: center;
}

table th {
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media screen and (max-width: 600px) {
	table {
		border: 0;
	}

	table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	table tr {
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: 0.625em;
	}

	table td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: 0.8em;
		text-align: right;
	}

	table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	table td:last-child {
		border-bottom: 0;
	}
}

W css można zmienić kolor tła tabeli, czcionkę, rozmiar. Można też w mobilnej wersji zmienić style, tam gdzie: @media screen and (max-width: 600px).

No i to wszystko 🙂 Zdecydowanie taka tabelka ładnie prezentuje się od zwyczajnej tabeli bez użycia styli. Zobaczcie jak pięknie wygląda na telefonie. Schludnie i czytelnie.