Afficher/masquer le menu
Liens Ecyseo
  • Tags cloud
  • Daily
  • Pictures wall
  • Search
  • Display options
    • Links per page :
    • 20 links
    • 50 links
    • 100 links
  • RSS Feed
  • Login

J'ai besoin d'intimité. Non pas parce que mes actions sont douteuses, mais parce que votre jugement et vos intentions le sont.

5169 links 

page 1 / 1

Liste des liens

[CSS] Rendre un tableau responsive | by Vanessa Asse | Medium
2023-04-11 18:12 - permalink -
    <table class=”events-table” >
    <caption>Évènements</caption>
    <thead>
    <tr>
    <th class=”event-date”>Date</th>
    <th class=”event-time”>Horaire</th>
    <th class=”event-description”>Evènement</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td data-label=”Date”> Le #_EVENTDATES</td>
    <td data-label=”Horaire”>#_EVENTTIMES</td>
    <td data-label=”Evènement”>#_EVENTLINK</td>
    </tr>
    </tbody>
    </table>

Je pense à ajouter un “data-label” à chacun de mes “td”.

Et voici le CSS :


table caption {
    display: none;
}

@media all and (max-width:500px){
    table{
        width:100%;
    }

    table caption {
        display: block;
        background-color: #484d55;
        color:white;
    }

    .table thead {
    display: none;
    }

    .table tr{
    display: block;
    margin-bottom: 40px;
    }

    .table td {
    display: block;
    text-align: right;
    }

    .table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    }
}
css html table
- https://medium.com/@vanessaasse/rendre-un-tableau-responsive-5ed9ab7bb3ed
page 1 / 1


Tags


  • shaarli
  • wikipedia

Tags cloud

Shaarli - The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community - Help/documentation
Affiches "loi aviva" créées par Geoffrey Dorne le 13 Mai, 2020 - Mastodon 1 - Mastodon 2