web-dev-qa-db-fra.com

Table HTML avec colonne d'en-tête et ligne fixes sans JS

J'essaie actuellement d'afficher correctement une sorte d'agenda qui représente les heures sur la ligne de tête et les différentes salles de la colonne de tête.

Je veux avoir des en-têtes fixes (première ligne et première colonne) et un tableau déroulant indiquant si une salle est disponible à un moment donné.

Après quelques recherches, j'ai constaté que cette question avait déjà obtenu une réponse à l'aide de scripts JS ou JQuery faits maison. Je voudrais éviter cela en utilisant <div>containers.

Ma stratégie consiste à créer un conteneur global avec deux enfants:

  • Un à gauche contenant la colonne d'en-tête
  • Un à droite contenant la ligne d'en-tête et la table

Cela me permettrait de faire défiler horizontalement sans faire bouger la colonne d’en-tête, et de faire défiler verticalement sans faire bouger la ligne d’en-tête (de quelque absolute positionnement dans ses parents, je suppose?).

Mon problème principal est que je ne peux pas comprendre comment afficher ces deux éléments principaux l'un à côté de l'autre. En effet, si j'utilise la propriété CSS float, je ne peux pas avoir un débordement défilable.

Alors me voilà, il me faut un peu de votre temps pour m'aider à positionner ces deux éléments sans jouer avec le défilement.

Vous trouverez ici la partie HTML du code: . .] Fooname Barname Barfoo Zorzor Lorname Ipsname [.________ 

    <div class="right">
        <table>
            <thead>
                <th>8-10</th>
                <th>10-12</th>
                <th>12-14</th>
                <th>14-16</th>
                <th>16-18</th>
                <th>18-20</th>
            </thead>

            <tbody>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
            </tr>
            <tr>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
            </tr>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
            </tr>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
            </tr>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

CSS:

.table-container {
    position: relative;
    width: 600px;
    height: 100%;
    border: 2px solid red;
    display: inline-block;
}

th {
    border: 1px solid black;
    padding: 10px;
}

td {
    border: 1px solid black;
    padding: 10px;
    margin: 0;
    white-space: nowrap;
}

.right {
    overflow: auto;
}

Au moment où j'écris ceci, l'aperçu n'affiche pas les premiers éléments de mon code en tant que ... code mais les interprète en tant que html. Donc, vous trouverez ici le code complet + rendu: DEMO

htmlcsshtml5css3
7
Thibault Martin

Le moyen le plus simple est d’ajouter ce css:

table {
    float: left;
}

Et cela fonctionnera comme vous le souhaitez. 

Exemple

5
Morpheus

Essayez ceci Fiddle

CSS:

.right {
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 134px;
    width: 73%;

}
0
Manoj