2017-03-20 4 views
0

Je travaille sur une page HTML qui affiche une table de données (en utilisant l'élément <table>). Je définis actuellement la largeur CSS de chaque colonne en pourcentage, avec la colonne NAME à 60% car elle peut être la plus grande. Voici une capture d'écran réelle:Comment contrôler les largeurs de colonnes de la table HTML?

current

Ce que je voudrais vraiment faire est en quelque sorte « ancre » la colonne DATE à droite de la colonne NOM, créant un espace blanc bien entre elle et la copie, DOWNLOAD et colonnes SHARE. Voici une capture d'écran trafiqué:

desired

Cependant, je ne peux pas donner la colonne DATE un grand pourcentage, parce que je veux pour diminuer la taille si le nom se trouve être plus. Voici une autre capture d'écran trafiquée. Si le nom est plus long, la colonne NOM devrait augmenter en largeur pour accueillir, et la colonne DATE devrait diminuer en largeur:

even better

Est-il possible d'accomplir ce que je veux via CSS, et sans se déplacer loin d'un élément <table>?

Répondre

0

réglez le paramètre « td » à ceci:

tr td.name-column { 
    width:1%; 
    white-space:nowrap; 
} 

(où nom-colonne est la classe ajoutée à l'élément « td »)

Vous pouvez aussi essayer d'ajouter un peu de rembourrage pour donner une chambre