<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;
    }
}

Cool. Ça m'a l'air de bien fonctionner en effet sauf les flèches qui ne s'affichent pas. Tu as utilisé quoi dans ton js pour ça ?

Table de correspondance entre élément unicode et html. Pratique.

À tester.

Une autre manière de faire et nécessitant de connaître les entêtes du tableau, trouvée ici : http://css-tricks.com/responsive-data-tables/

/ ------------Responsive tables----------------- /
/
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data

td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }*/

td.nbphotos:nth-of-type(1):before { content: "Nombre"; }
td.optionphotos:nth-of-type(2):before { content: "Options"; }
td.prixphotos:nth-of-type(3):before { content: "Prix"; }
td.bon:nth-of-type(4):before { content: "Bon"; }

td.ancien:nth-of-type(1):before { content: "Ancien"; }
td.nouveau:nth-of-type(2):before { content: "Nouveau"; }

}
/ ------------Responsive tables----------------- /

via SebSauvage : http://sebsauvage.net/links/?cMa5jw