jQuery Girl
  1. jQuery Girl
  3. Comment créer une largeur variable dans un tableau de mise en page fixe?
Intereting Posts
Ajouter du CSS ou du style à chaque nœud dans swimlane (bibliothèque GOjs) comment initialiser plusieurs instances de script de curseur – un curseur pour chaque div en fonction de l’atsortingbut de classe du div Différence entre $ (‘# foo’). Remove (‘a’) et $ (‘# foo’). Find (‘a’). Remove () Comment utiliser l’info-bulle d’amorçage? Rendre ‘Search’ à distance et tout le rest (sorting, pagination, etc.) en local dans jqGrid Accéder aux données d’un tableau avec jquery Ajax jquery passant plusieurs services Web de parameters Remplir une zone de saisie en utilisant PHP avec les valeurs d’une table MySQL Où insérer des bibliothèques JavaScript et CSS dans mon code HTML? Problème de pagination associé à la propriété dataSrc et à la source de données personnalisée Accéder à la variable javascript dans ajax success JQuery UI Datepicker, inverser l’ordre de l’année dans les listes déroulantes Données de formulaire non sérialisées dans le modèle de contrôleur asp.net core mvc Bootstrap 3 collapse changer d’icône en chevron au clic jQuery scrollTo et masquer un élément

Comment créer une largeur variable dans un tableau de mise en page fixe?

J’ai un tableau contenant trois

cellules.

  • La largeur du premier devrait dépendre du contenu.
  • la largeur du second devrait être fixée pour toujours.
  • la largeur du troisième doit remplir l’espace restant.

Note1: Mon site web est responsive . la largeur du troisième

doit être modifiée dans différents écrans.

Note2: Pour éviter de sortir le contenu du troisième

, je devrais utiliser table-layout: fixed; et width: 100%; pour ma table. En outre, je dois utiliser word-wrap: break-word; pour les

s. le fait est que je ne veux pas utiliser le word-break: break-all; au lieu de word-wrap . (parce que ça casse les mots au milieu

)

Voici ma tentative:

HTML: 

 
 
 
 depends on the number of digit always fixed all of the rest (remaining)

CSS: 

 .container{ width: 60%; } table{ table-layout: fixed; width: 100%; } td{ word-wrap: break-word; vertical-align: top; } .VN{ width: auto; } .S{ width: 10px; } .CT{ width: 98%; }

Aussi voici un violon.

Ce que je veux, c’est comme ça:

Exemple 1: 

 +-+---+-------------------------------------------------------+ |4|fix|this is a test...! | +-+---+-------------------------------------------------------+

exemple2: 

 +----+---+----------------------------------------------------+ |2 |fix|this is a test...! | +----+---+----------------------------------------------------+ | |fix|this has not any first ...! | +----+---+----------------------------------------------------+ |1234|fix|this has not any first ...! | +----+---+----------------------------------------------------+

exemple3: 

 +---+---+-----------------------------------------------------+ |123|fix|the width of number of vote up cell should be | | | |changeable and it should be noted that this cell is | | | |break-word. | +---+---+-----------------------------------------------------+

exemple4: 

 +---+---+-----------------------------------------------------+ |123|fix|It is a integrated testtttttttttttttttttttttttttttttt| | | |ttttttttttttttttttttttttttttttttttttttttttttttttttttt| | | |tttttttttttttttttttttttttttttttttttttttt | +---+---+-----------------------------------------------------+

exemple5: 

 +---+---------------------------------------------------------+ |fix|this has not any first .. then remove VN cell! | +---+---------------------------------------------------------+ |fix|this has not any first .. then remove VN cell! | +---+---------------------------------------------------------+

Dois-je utiliser JavaScript pour mettre en œuvre ce dont j’ai besoin?

Essayez cette propriété:

white-space: pre-line;

Il y a plus de valeurs avec un comportement différent ici