Rendi la colonna HTML più ampia con l'espansione del div interno

Question

Ti preghiamo di considerare quanto segue:

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

Per qualche ragione, la colonna che contiene un div non si espanderà a 500px come suggerisce lo stile.

Sai come ottenere il td per onorare la larghezza che sto specificando nello stile?

Answer 1

In teoria, puoi usare gli stili min-width e max-width. In pratica, alcuni browser popolari ignorano questi stili. In questo caso hai dichiarato esplicitamente una larghezza di 400, quindi dovrebbe sempre essere uguale a 400 a meno che non venga agito da un bambino in crescita o da un padre che si restringe. Puoi eseguire il server " server " e determinare programmaticamente l'attributo width in base alla dimensione del contenuto, oppure è possibile giocare con lo stile di overflow o inserirlo in un pannello con una barra di scorrimento orizzontale.

Answer 2

c'è una larghezza sul tavolo e altri tds all'interno del tavolo? Inoltre, hai in corso un tipo di documento?

Tuttavia, detto questo, ecco la tua soluzione:

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

Impostazione appropriata dell'imbottitura.

---

Avendo riletto la tua domanda, ritengo che questa potrebbe non essere la risposta che stai cercando. Potresti approfondire un po 'di più?

Answer 3

prova questo:

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

se comunque vuoi che la td abbia la dimensione esatta del div, fino ad un MAX di 500px, prova:

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

Tenendo presente che IE6 non capisce la larghezza massima e la forzerà a essere 500px.

Answer 4

Non hai motivo di impostare una larghezza fissa sul DIV all'interno del TD, per impostazione predefinita i DIV sono elementi a blocchi, il che significa che riempiranno l'intera larghezza di lì contenente l'elemento.

Imposta il padding sul TD o il margine sul DIV per ottenere lo stesso stile.

Senza vedere ulteriori markup o CSS non vedo alcun motivo per cui il TD non sarebbe 500px, se hai aggiunto due colori di sfondo diversi agli elementi noterai che il TD sarà 100px più largo del div.