Reszponzív táblázatok

2020-07-03

A táblázatok megjelenítésére mobil eszközön több lehetőség létezik, ezek közül mutatok most kettőt a videóban.

Az egyik módszer, hogy a táblázatot DIV-be helyezzük és az overflow értékét auto-ra állítjuk. Ha a viewport mérete már nem teszi lehetővé, hogy a teljes táblázat látható legyen, akkor a DIV kap egy vízszintes scrollbart, és a táblázat scrollozhatóvá válik.

A másik módszer valamivel bonyolultabb, viszont sokkal jobb eredményt érhetünk el vele. Itt a táblázat teljes markup-jét lecseréljük DIV-ekre és a layout-ot a flexbox-ra bízzuk, ami lehetővé teszi a "cellák" vízszintes és függőleges elrendezését is a flex-direction property-nek köszönhetően. Innentől egy media query-vel simán át tudjuk állítani a táblázatot függőleges elrendezésűre, ha a felbontás szükségessé teszi.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<!doctype html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive table</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="wrapper">

    <table>
        <tr>
            <th class="image">image</th>
            <th class="excerpt">excerpt</th>
            <th class="author">author</th>
            <th class="title">title</th>
            <th class="price">price</th>
        </tr>
        <tr>
            <td class="image"><img src="pics/1.jpg" alt=""></td>
            <td class="excerpt"><p>New York Times bestselling author and Queen of the Beach Reads Mary Kay Andrews delivers her next blockbuster, Hello Summer.</p><p>It’s a new season..</p></td>
            <td class="author">Mary Kay Andrews</td>
            <td class="title">Hello, Summer</td>
            <td class="price">$15.99</td>
        </tr>
        <tr>
            <td class="image"><img src="pics/2.jpg" alt=""></td>
            <td class="excerpt"><p>AN INSTANT NEW YORK TIMES BESTSELLER</p><p>“Sexy and satisfying, Big Summer is the perfect quarantine read.” —USA TODAY</p><p>“The beach read to end all beach reads.” —Entertainment Weekly</p></td>
            <td class="author">Jennifer Weiner</td>
            <td class="title">Big Summer: A Novel</td>
            <td class="price">$19.11</td>
        </tr>
        <tr>
            <td class="image"><img src="pics/3.jpg" alt=""></td>
            <td class="excerpt"><p>"Original, sparkling bright, and layered with feeling..."—Sally Thorne, author of The Hating Game</p><p>A romance writer who no longer believes in love and a literary writer stuck in a rut engage in a summer-long challenge that may just upend everything they believe about happily ever afters.</p></td>
            <td class="author">Emily Henry</td>
            <td class="title">Beach Read</td>
            <td class="price">$12.69</td>
        </tr>
    </table>

    <br><br>

    <div class="table">
        <div class="row head">
            <div class="col image">image</div>
            <div class="col excerpt">excerpt</div>
            <div class="col author">author</div>
            <div class="col title">title</div>
            <div class="col price">price</div>
        </div>
        <div class="row">
            <div class="col image"><img src="pics/1.jpg" alt=""></div>
            <div class="col excerpt"><p>New York Times bestselling author and Queen of the Beach Reads Mary Kay Andrews delivers her next blockbuster, Hello Summer.</p><p>It’s a new season..</p></div>
            <div class="col author">Mary Kay Andrews</div>
            <div class="col title">Hello, Summer</div>
            <div class="col price">$15.99</div>
        </div>
        <div class="row">
            <div class="col image"><img src="pics/2.jpg" alt=""></div>
            <div class="col excerpt"><p>AN INSTANT NEW YORK TIMES BESTSELLER</p><p>“Sexy and satisfying, Big Summer is the perfect quarantine read.” —USA TODAY</p><p>“The beach read to end all beach reads.” —Entertainment Weekly</p></div>
            <div class="col author">Jennifer Weiner</div>
            <div class="col title">Big Summer: A Novel</div>
            <div class="col price">$19.11</div>
        </div>
        <div class="row">
            <div class="col image"><img src="pics/3.jpg" alt=""></div>
            <div class="col excerpt"><p>"Original, sparkling bright, and layered with feeling..."—Sally Thorne, author of The Hating Game</p><p>A romance writer who no longer believes in love and a literary writer stuck in a rut engage in a summer-long challenge that may just upend everything they believe about happily ever afters.</p></div>
            <div class="col author">Emily Henry</div>
            <div class="col title">Beach Read</div>
            <div class="col price">$12.69</div>
        </div>
    </div>

</div>

</body>
</html>

CSS forráskód


@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

* { padding:0; margin:0; box-sizing:border-box }
body { background: #f4f4f4; font-family: 'Roboto', sans-serif }
.wrapper { width: 90%; max-width: 1000px; margin: 40px auto }

table { border-collapse: collapse }
td, th { padding: 20px; }
th { background: #c9c9c9; text-align: left }
table .author, table .title { white-space: nowrap }
table .price { font-weight: 700; text-align: right }
table .image { text-align: center }
table tr:nth-child(even) { background:  rgba(255,255,255,.8) }

@media(max-width:800px) {
    td, th { padding: 10px }
    table .excerpt { display: none }
}

@media(max-width:600px) {
    table .image { display: none }
}

.table .row { display: flex; align-items: center }
.table .row:nth-child(even) { background:  rgba(255,255,255,.8) }
.table .head { background: #c9c9c9; font-weight: 700 }
.table .col { padding: 20px }
.table .image { flex-basis: 16%; text-align: center }
.table .excerpt { flex-basis: 36% }
.table .author,
.table .title { flex-basis: 19%; white-space: nowrap }
.table .price { flex-basis: 10%; font-weight: 700; text-align: right }
@media(max-width:1000px) {
    .table .row { flex-flow: column wrap; text-align: center; padding: 20px; background: #fff; margin: 0 0 20px 0; border: 1px solid #ddd }
    .table .row.head { display: none; }
    .table .col { padding: 10px }
    .table .excerpt { font-size: 13px; color: #888; order: 5 }
    .table .excerpt p { line-height: 1.5; margin: 0 0 10px 0 }
    .table .excerpt p:last-child { margin: 0 }
    .table .price { font-size: 20px }
}