Mot de remplissage des éléments TD dans une fenêtre de navigateur rétrécie

Question

J'ai une table dont les colonnes contiennent deux divs en ligne, l'une affichant une image et l'autre le texte côte à côte. Donc chaque td est rectangulaire avec une image sur la droite et du texte à côté de lui sur la gauche (sur une seule ligne). Le problème (qui se produit dans tous les navigateurs) est quand je rétrécis la taille horizontale du navigateur, plutôt que de garder la largeur td fixe et en ajoutant une barre de défilement horizontale, il enveloppe le texte et le déplace sous l'image, réduisant ainsi la largeur du td. Comment puis-je obtenir les largeurs de Td pour rester fixe quelle que soit la largeur du navigateur? Oh et au cas où ça l'affecterait, les deux divs ont un positionnement relatif de sorte que je puisse légèrement ajuster leur position dans le td. De plus, je ne peux pas fixer la largeur du td puisque chaque largeur de colonne doit varier légèrement en fonction du texte. Merci

<td> 
    <div style="display:inline;position:relative;"> 
    <img src="some_image.jpg" /> 
    </div> 
    <div style="display:inline;position:relative;"> 
    some short text 
    </div> 
</td> 

Answer 1

Vous pouvez ajouter le 'nowrap' attribuer à la td:

<td nowrap> 

ou le style avec:

td {white-space:nowrap;} 

Answer 2

Fondamentalement, votre problème est là, dans la question « Comment puis-je obtenir les largeurs td pour rester fixe ... Aussi, je ne peux pas fixer la largeur de la td depuis ... » :)

De toute façon, il y a deux solutions possibles auxquelles je peux penser.

1. Si vous connaissez la largeur maximale de la table que vous souhaitez autoriser, vous pouvez l'insérer dans un div dont la largeur est fixe. De cette façon, le corps de votre page ne rétrécira pas à moins de la largeur de la div d'emballage, et donc il ne poussera pas sur votre table.

2. Utilisez javascript pour fixer la largeur du td après le chargement de la page. De cette façon, il sera fixé à la largeur de son contenu. Vous devriez pouvoir obtenir la largeur du td à partir de la propriété offsetWidth.