Tornar a coluna HTML mais ampla à medida que a divisão interna se expande

Question

Por favor, considere o seguinte:

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

Por alguma razão, a coluna que contém uma div não se expandirá para 500px, como sugere o estilo.

Você sabe como fazer com que o TD honre a largura que estou especificando no estilo?

Answer 1

Em teoria, você pode usar os estilos de largura de min de largura e max. Na prática, alguns navegadores populares ignoram esses estilos. Nesse caso, você declarou explicitamente uma largura de 400; portanto, ela sempre deve ser igual a 400, a menos que seja acionado por uma criança que cresce ou um pai diminuindo. Você pode runat- "servidor" e determinar programaticamente o atributo de largura com base no tamanho do conteúdo, ou pode jogar com o estilo de transbordamento ou colocá-lo em um painel com uma barra de rolagem horizontal.

Answer 2

Existe uma largura sobre a mesa e outros TDs dentro da tabela? Além disso, você tem um tipo de documento acontecendo?

No entanto, dito isso, aqui está a sua solução:

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

Definindo seu preenchimento adequadamente.

---

Depois de reler sua pergunta, sinto que essa pode não ser a resposta que você está procurando. Você poderia elaborar um pouco mais?

Answer 3

Experimente isso:

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

Se, no entanto, você deseja que o TD seja o tamanho exato da div, até um máximo de 500px, tente:

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

Lembre-se de que o IE6 não entende a largura máxima e apenas forçará a 500px.

Answer 4

Você não tem motivos para definir uma largura fixa na div dentro do TD, por padrão as div são elementos de bloco, o que significa que eles preencherão a largura total do elemento contendo.

Defina o preenchimento no TD ou a margem na div para alcançar o mesmo estilo.

Sem ver a Markup Futher ou o CSS, não consigo ver nenhuma razão pela qual o TD não seria de 500 px, se você adicionasse duas cores de fundo diferentes aos elementos que realmente notará que o TD será 100px mais largo que o div.