Augmentez la taille de la colonne HTML à mesure que votre division interne se développe

Question

Veuillez prendre en compte les éléments suivants:

<td style="width: 500px;">
    <div style="width: 400px;">SomeContent</div>
</td>

Pour une raison quelconque, la colonne contenant un div ne sera pas étendue à 500 pixels comme le suggère le style.

Savez-vous comment obtenir que le td respecte la largeur que je spécifie dans le style?

Answer 1

En théorie, vous pouvez utiliser les styles min-width et max-width. En pratique, certains navigateurs populaires ignorent ces styles. Dans ce cas, vous avez explicitement déclaré une largeur de 400; elle doit donc toujours être égale à 400 sauf s’agissant d’un enfant en croissance ou d’un parent qui rétrécit. Vous pouvez exécuter un " serveur " et déterminez par programme l’attribut width en fonction de la taille du contenu; vous pouvez aussi jouer avec le style de débordement ou le placer dans un panneau doté d’une barre de défilement horizontale.

Answer 2

Y at-il une largeur sur la table et d’autres tds dans la table? De plus, avez-vous un type de document en cours?

Cependant, cela dit, voici votre solution:

<td style="width: 500px">
  <div style="padding: 0 50px">SomeContent</div>
</td>

Définissez votre remplissage de manière appropriée.

Après avoir relu votre question, j’estime que cela pourrait ne pas être la réponse à votre question. Pourriez-vous élaborer un peu plus?

Answer 3

essayez ceci:

<td style="width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

si toutefois vous voulez que le td soit à la taille exacte de la div, jusqu'à un MAX de 500px, essayez:

<td style="max-width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

Gardant à l'esprit qu'IE6 ne comprend pas max-width et le forcera simplement à 500px.

Answer 4

Vous n'avez aucune raison de définir une largeur fixe sur la DIV dans le TD. Par défaut, les DIV sont des éléments de bloc, ce qui signifie qu'elles rempliront toute la largeur de l'élément contenant.

Définissez le remplissage sur le TD ou la marge sur la DIV pour obtenir le même style.

Sans voir plus de balisage ou de css, je ne vois pas pourquoi le TD n'aurait pas 500 px. Si vous ajoutez deux couleurs d'arrière-plan différentes aux éléments, vous remarquerez en effet que le TD sera 100px plus large que le div.