Hacer que la columna HTML sea más amplia a medida que se expande la división interna

Question

Tenga en cuenta lo siguiente:

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

Por alguna razón, la columna que contiene un div no se expandirá a 500 px como sugiere el estilo.

¿Sabes cómo hacer que el td respete el ancho que estoy especificando en el estilo?

Answer 1

En teoría, puede usar los estilos min-width y max-width. En la práctica, algunos navegadores populares ignoran estos estilos. En este caso, ha declarado explícitamente un ancho de 400, por lo que siempre debe ser igual a 400 a menos que un niño en crecimiento o un padre lo reduzca. Podrías ejecutar- "servidor" y determine programáticamente el atributo de ancho en función del tamaño del contenido, o podría jugar con el estilo de desbordamiento o ponerlo en un Panel con una barra de desplazamiento horizontal.

Answer 2

¿hay un ancho en la tabla y otros tds dentro de la tabla? Además, ¿tienes un tipo de documento en curso?

Sin embargo, dicho esto, aquí está tu solución:

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

Configuración adecuada de su relleno.

---

Después de releer su pregunta, creo que esta podría no ser la respuesta que está buscando. ¿Podrías elaborar un poco más?

Answer 3

prueba esto:

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

si, sin embargo, desea que el td sea del tamaño exacto del div, a un máximo de 500 px, intente:

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

Teniendo en cuenta que IE6 no entiende el ancho máximo, y solo lo forzará a ser 500px.

Answer 4

No tiene ninguna razón para establecer un ancho fijo en el DIV dentro del TD, por defecto los DIV son elementos de bloque, lo que significa que llenarán el ancho completo de ese elemento que contiene.

Establezca el relleno en el TD o el margen en el DIV para lograr el mismo estilo.

Sin ver más marcas o css, no puedo ver ninguna razón por la que el TD no sea de 500px, si agrega dos colores de fondo diferentes a los elementos, notará que el TD será 100px más ancho que el div.