web-dev-qa-db-fra.com

Comment puis-je obtenir la colonne la plus à droite pour remplir l'espace restant?

Disons que j'ai un tableau avec seulement trois petites colonnes. Il semble désordonné et déséquilibré d'avoir une table étroite et haute serrant le côté gauche de mon écran ( exemple ), donc j'aimerais que le tableau couvre la largeur de la page. Cependant, lorsque je définit la largeur du tableau à 100%, toutes les colonnes sont également étirées, alors maintenant mes données sont réparties finement sur l'écran, ce qui semble également désordonné ( exemple ).

Ce que je recherche, c'est une solution où toutes les colonnes ont la même taille qu'elles auraient eu si le tableau était width: auto, mais la dernière colonne remplit l'espace restant à l'écran. C'est ce que fait Spotify, par exemple:

Spotify

La colonne "Utilisateur" couvrira la largeur restante, quoi qu'il arrive. Existe-t-il un moyen relativement simple d'y parvenir avec les tableaux HTML et CSS?

htmlcsshtml-table
42
Hubro

J'ai trouvé une solution simple:

table td:last-child {
    width: 100%;
}

Résultat:

Screenshot

body {
    font: 12px "Sans serif";
}

table {
    width: 100%;

    background-color: #222222;
    color: white;
    border-collapse: collapse;
}

table th {
    padding: 10px;
    text-align: left;
}

table td {
    padding: 2px 10px;
}

table td:last-child {
    width: 100%;
}

table td:nth-child(odd), table th:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

table tr:last-child td {
    padding-bottom: 10px;
}
<table>
    <tr>
        <th>Product</th>
        <th>Cardinality</th>
        <th>Price per item</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>5</td>
        <td>$2</td>
    </tr>
    <tr>
        <td>Pear</td>
        <td>3</td>
        <td>$3</td>
    </tr>
    <tr>
        <td>Sausage</td>
        <td>10</td>
        <td>$0.5</td>
    </tr>
    <tr>
        <td>Pineapple</td>
        <td>2</td>
        <td>$8</td>
    </tr>
    <tr>
        <td>Tomato</td>
        <td>5</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>Lightsaber</td>
        <td>2</td>
        <td>$99 999</td>
    </tr>
</table>

Cela semble fonctionner dans mon scénario actuel, mais cela ressemble à quelque chose qui peut provoquer des effets secondaires indésirables dans d'autres situations. Si je tombe sur un, je modifierai cette réponse.

Les effets secondaires possibles

  • Les cellules du tableau multi-mots seront enveloppées sur plusieurs lignes pour garder la colonne aussi étroite que possible. Une solution consiste à utiliser white-space: nowrap sur les cellules du tableau, mais cela empêchera les cellules contenant beaucoup de texte d'habiller quand elles le devraient.
60
Hubro

Si c'est ce que vous vouliez dire: image alors je peux y arriver en utilisant une structure de table html standard avec le css suivant:

table {
  width:auto;
}
td {
  white-space:nowrap;
}
td:last-child {
  width:100%;
}

--EDIT: travaillez avec votre jsfiddle

16
AzDesign

Réglez la largeur de votre table à 100%. Définissez des largeurs sur toutes les colonnes sauf la plus à droite. La colonne la plus à droite s'agrandira pour remplir l'espace disponible.

10
Chris Heald