Comment définir la largeur d'une colonne de table pour une liste déroulante dynamique?

J'ai une table avec une liste déroulante dynamique.Comment définir la largeur d'une colonne de table pour une liste déroulante dynamique?

La largeur du bas de goutte change en fonction de son contenu.

Je voudrais la colonne de table pour être la même que la largeur de la liste déroulante. Si je définis une largeur inférieure à la taille de la liste déroulante IE semble rendre la colonne plus grande que la liste déroulante tout en enveloppant le titre de la colonne, il insère des espaces de chaque côté de la liste déroulante.

est-il un moyen de CSS pour dire simplement faire la colonne la même taille que son contenu?

Voici un tableau html échantillon qui comprend ma solution actuelle (bidouille)

<table id="mappingtable" width="100%" align="center" cellspacing="0" cellpadding="0" border="0"> 
    <tr> 
    <th width="80px">FixedWidthColumn</th> 
    <th width="80%">ExpandingColumn</th> 
    <th width="122px">&nbsp;</th> 
    <th>DynamicColumn</th> 
    </tr> 
    <tr> 
    <td align="center">1</td> 
    <td>Text</td> 
    <td align="center">Button</td> 
    <td align="center">DropDownList</td> 
    </tr> 
</table>

Le problème existe sans css

Si je retire la largeur = « 80% » de la colonne expansion du colonne dynamique aura des espaces

J'ai essayé largeur: auto sur la colonne dynamique et la mise à une largeur fixe, mais aucun de ces travaux pour moi

Source

2009-06-19 Adam Fox

Oui. Probablement. Si vous pouviez nous montrer votre code html et vos css actuels, nous serions probablement plus précis et plus "utiles" pour vous. –

Le titre de la colonne est-il plus large que la liste déroulante? – jeroen

Non le titre de la colonne enveloppe que si je mets la largeur à une petite valeur –

Pourquoi ne pas, pour cette table spécifique, remplacer les données css à l'intérieur des paramètres de la table?

Lorsque ce paramètre est passé (ou analysé ailleurs).

Source

2009-06-19 15:22:22 amischiefr

Pouvez-vous élaborer un peu sur ce que vous voulez dire? Ce que j'ai pu faire est de définir la largeur d'une colonne différente à 60% et de laisser cette colonne déroulante sans paramètre widht. Cela atteint mon objectif mais semble moche, car cette approche écrase également mes colonnes de largeur fixe –

Oui, vous pouvez définir le paramètre width dans votre table en tant que tel: width = "$ {myTable.width}" où myTable.width est un paramètre – amischiefr

Qu'est-ce que vous avez besoin est une table avec une largeur de 100% et 1 colonne sans une largeur définie. La colonne avec la liste déroulante peut avoir une largeur vraiment faible et le navigateur fera automatiquement correspondre toute la colonne à la largeur de la liste déroulante.

Le code HTML devrait ressembler à ceci:

<table width="100%" > 
    <tr> 
    <th width="80">FixedWidthColumn</th> 
    <th>ExpandingColumn</th> 
    <th width="122"> </th> 
    <th width="10">DynamicColumn</th> 
    </tr> 
    <tr> 
    <td align="center">1</td> 
    <td>Text</td> 
    <td align="center">Button</td> 
    <td align="center">DropDownList</td> 
    </tr> 
</table>

En réponse aux remarques ci-dessous, il y a des solutions que vous pouvez explorer:

Vous pouvez éventuellement ajouter une une balise d'option à votre liste déroulante qui est au moins une certaine largeur et certains espaces sans rupture comme ceci:

<option>Please select...&nbsp;&nbsp;&nbsp;&nbsp;</option>

Vous pouvez donner à l'étiquette de sélection d'une largeur minimale comme ceci:

<select style="min-width: 200px;" >

Source

2009-06-19 18:02:19 Michiel

J'ai essayé votre suggestion à l'avance, si j'utilise une petite largeur pour la colonne, le titre est enveloppé et la liste déroulante contient un gros bloc d'espace de chaque côté s'il est plus grand que la colonne –

Essayez de mettre l'en-tête dans un tag . Cela devrait l'empêcher d'envelopper. –

La valeur ** width = "10" ** sur la colonne dynamique a fonctionné lorsque j'ai essayé cet exemple. J'ai testé avec ** Internet Explorer 7 **, ** Firefox 3.5.1 ** et ** Opera 9.64 **. Quel navigateur et quelle version testez-vous? En outre, quel DOCTYPE est spécifié en haut dans le HTML (le cas échéant)? – awe

C'est ainsi que fonctionnent les tableaux, s'il y a 2 colonnes sans largeur et que la largeur de la table est définie, l'espace disponible restant sera réparti entre les 2 colonnes.

Retrait de la largeur de 100% de la table résoudrait votre problème si le contenu ExpandingColumn est assez grand pour remplir la largeur restante.

Source

2009-06-19 22:45:23 jeroen

Comment définir la largeur d'une colonne de table pour une liste déroulante dynamique?

Répondre

Questions connexes