Comment faire une colonne de table d'une largeur minimale

Ici est le modèle de données du fichier: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

Je suis en train de faire 8 des 10 colonnes d'une table, de ne prendre exactement la largeur minimale qu'ils en ont besoin, sur la base du texte, en respectant le rembourrage et les en-têtes de colonne.

Dans l'image d'exemple, je veux que tous, mais le 4e et le 9e colonnes de prendre le minimum de largeur. Techniquement, il y a 9 en-têtes de colonne, et le dernier a un colspan de 2. Le dernier en-tête est un span3. J'aimerais que la colonne pourcentage de prendre le moins de la largeur de ce qui est nécessaire, et de laisser la barre de progression ou le pass/fail boutons de prendre le reste.

La colonne 4 est mis en place pour remplacer débordé texte avec des points de suspension.

Image par exemple:
Comment faire une colonne de table d'une largeur minimale

OriginalL'auteur jnesselr | 2014-11-17

  1. 37

    Il y a un truc qui implique la définition de certaines cellules à une très petite largeur, puis en appliquant une white-space: nowrap propriété:

    <table>
    <tr>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td>Fills space</td>
        <td>Fills space</td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>
    td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

    Démonstration en direct

    Comme vous pouvez le voir au-dessus de violon, nowrap forces de la cellule du tableau pour éviter toute sauts de lignes, et donc l'alignement de sa largeur la plus petite possible.

    REMARQUE: Si vous avez une thead, vous souhaitez appliquer le td's stylings de th.

    Mise à JOUR #1: les points de suspension (...)

    Pour réduire automatiquement une colonne plus longue dans les ellipses, les text-overflow: ellipsis est ce que vous êtes probablement à la recherche pour:

    td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    Démonstration en direct

    Cela nécessite aussi overflow ensemble de hidden, ainsi que d'un width ou max-width avec une valeur fixe. Ajouter le cell-collapse classe de cellules dont la largeur que vous souhaitez limiter.

    Mise à JOUR #2: Manipulation de Bootstrap

    Bootstrap est table classe définit width: 100%; qui gâchera cette approche. Vous pouvez corriger cela avec table { width: inherit !important; }

    Démonstration en direct

    REMARQUE: Les tableaux de cette approche ont déjà pleine largeur, car les cellules d'un tableau déjà width: auto;.

    Précédente Javascript-solution de base supprimé, puisque le pur CSS approche fondée sur fonctionne maintenant de façon uniforme dans tous les navigateurs modernes. Le code d'origine est toujours disponible liée à JSfiddle, commenté.

    Addendum: le précédent calcul de la largeur de la solution retournée "auto", la largeur, pour le texte, j'ai mis à jour la réponse à refléter les changements.
    Comment faire en jQuery?

    OriginalL'auteur John Weisz

  2. 1

    Si vous connaissez les tailles que vous voulez que votre colonne et ils sont fixés, je suggère l'utilisation d'un tableau de mise en page. Il vous permet de spécifier le fixe % chaque colonne.

    Voici un lien qui m'a aidé dans une situation similaire
    http://css-tricks.com/fixing-tables-long-strings/

    J'ai mis à jour le fichier de modèle que j'ai utilisé, car j'ai oublié de pousser la version actuelle de sorte que vous puissiez le voir. Il est défini comme un tableau fixe, mise en page, mais je ne sais pas si c'est correct. Je ne sais pas ce que les largeurs des colonnes vont être, puisque le texte contenu peut changer.

    OriginalL'auteur Vall3y