Comment faire accessibilité et éco-conception @Démo publique

Fiche: Tableau responsive

Une simple table avec la bonne utilisation des medias-queries et quelques classes CSS utilisées correctement.

Réduisez la taille de la fenêtre jusqu'à voir une présentation adaptée du tableau.

[table]
	[thead]
        [tr]
            [th] id + scope
            [...]
    [tbody]
    	[tr]
    		[th] id + scope
    		[td] headers

<table>
    <thead>
        <tr>
            <th id="nom" scope="col">Nom</th>
            <th id="distance" scope="col">Distance</th>
            <th id="dplus" scope="col">Dénivelé positif</th>
            <th id="format" scope="col">Format</th>
            <th id="lieu" scope="col">Lieu</th>
            <th id="date" scope="col">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="lieu1" scope="row" headers="nom">Millau</th>
            <td headers="distance lieu1">100 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu1">1 100 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu1">Route</td>
            <td headers="lieu lieu1">Millau, France</td>
            <td headers="date lieu1">Fin septembre</td>
        </tr>
        <tr>
            <th id="lieu2" scope="row" headers="nom">Spartathlon</th>
            <td headers="distance lieu2">246 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu2">2 500 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu2">Route</td>
            <td headers="lieu lieu2">Athènes – Sparte, Grèce</td>
            <td headers="date lieu2">Fin septembre</td>
        </tr>
        <tr>
            <th id="lieu3" scope="row" headers="nom">TransPyrenea</th>
            <td headers="distance lieu3">900 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu3">64 000 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu3">GR</td>
            <td headers="lieu lieu3">Pyrénées, France</td>
            <td headers="date lieu3">Août</td>
        </tr>
        <tr>
            <th id="lieu4" scope="row" headers="nom" lang="en">Hardrock</th>
            <td headers="distance lieu4">165 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu4">10 118 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu4">GR</td>
            <td headers="lieu lieu4" lang="en">Colorado, <abbr title="United States of America">USA</abbr></td>
            <td headers="date lieu4">Non spécifié</td>
        </tr>
        <tr>
            <th id="lieu5" scope="row" headers="nom">Ultra-Trail du Mont-Blanc (UTMB)</th>
            <td headers="distance lieu5">174 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu5">9 900 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu5">Chemins</td>
            <td headers="lieu lieu5">Tour du Mont-Blanc, France, Italie, Suisse</td>
            <td headers="date lieu5">Fin Août</td>
        </tr>
        <tr>
            <th id="lieu6" scope="row" headers="nom" lang="en">BadWater</th>
            <td headers="distance lieu6">217 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu6">4 000 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu6">Chemins</td>
            <td headers="lieu lieu6" lang="en">California, <abbr title="United States of America">USA</abbr></td>
            <td headers="date lieu6">Fin juillet</td>
        </tr>
        <tr>
            <th id="lieu7" scope="row" headers="nom">Ultra-Marin</th>
            <td headers="distance lieu7">175 <abbr title="kilomètres">km</abbr></td>
            <td headers="dplus lieu7">1 430 <abbr title="mètres">m</abbr></td>
            <td headers="format lieu7">Chemins</td>
            <td headers="lieu lieu7">Vannes - Golf du Morbihan, France</td>
            <td headers="date lieu7">Début juillet</td>
        </tr>        
    </tbody>
</table>

table {
    width: 100%;
    border-collapse: collapse;
 }
th,
td {
    padding: 8px;
border: 1px solid #ddd;
}
tbody th {
    text-align: left;
font-size: 95%;
}
@media screen and (max-width: 800px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }
    tbody th {
        text-align: left;
    }
    td {
        border: none;
        position: relative;
        padding-left: 6%;
    }
    td:before {
        position: absolute;
        left: 6px;
        font-weight: bold;
    }
}