<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Calendrier de réservation de véhicule</h2> <p class="lead"> Ce calendrier regroupe toute les réservations faite pour un véhicule ! </p> <hr /> <div class="agenda"> <div class="table-responsive"> <table class="table table-condensed table-bordered"> <thead> <tr> <th>Date</th> <th>Heure</th> <th>Réservé par</th> <th>Véhicule</th> <th>Raison de la réservation</th> </tr> </thead> <tbody> <!-- Single event in a single day --> <tr> <td class="agenda-date" class="active" rowspan="1"> <div class="dayofmonth">22</div> <div class="dayofweek">Lundi</div> <div class="shortdate text-muted">Aout, 2016</div> </td> <td class="agenda-time"> 9h30 - 18h </td> <td> Jessy Cauquy </td> <td> Scenic </td> <td class="agenda-events"> <div class="agenda-event"> Déplacement Fac de science ! </div> </td> </tr> <!-- Multiple events in a single day (note the rowspan) --> <tr> <td class="agenda-date" class="active" rowspan="3"> <div class="dayofmonth">23</div> <div class="dayofweek">Mardi</div> <div class="shortdate text-muted">Aout, 2016</div> </td> <td class="agenda-time"> 8h00 - 9h00 </td> <td> Yves Leroy </td> <td> Scenic </td> <td class="agenda-events"> <div class="agenda-event"> Instalation de matériel au LIFO </div> </td> </tr> <tr> <td class="agenda-time"> 10h30 - 12h00 </td> <td> François Masson </td> <td> Kangou </td> <td class="agenda-events"> <div class="agenda-event"> Récupération d'une cargaison de café </div> </td> </tr> <tr> <td class="agenda-time"> 15h00 - 17h00 </td> <td> Gaetan Linet </td> <td> Kangou </td> <td class="agenda-events"> <div class="agenda-event"> Transport de matériel informatique vers la Fac de droit </div> </td> </tr> </tbody> </table> </div> </div> </div>

.agenda { } /* Dates */ .agenda .agenda-date { width: 170px; } .agenda .agenda-date .dayofmonth { width: 40px; font-size: 36px; line-height: 36px; float: left; text-align: right; margin-right: 10px; } .agenda .agenda-date .shortdate { font-size: 0.75em; } /* Times */ .agenda .agenda-time { width: 140px; } /* Events */ .agenda .agenda-events { } .agenda .agenda-events .agenda-event { } @media (max-width: 767px) { }