it-swarm-pt.tech

Como faço para uma tabela HTML a mesma largura de sua tag div?

Eu tenho uma mesa dentro de uma div. Eu quero que a tabela ocupe toda a largura da tag div.

No CSS, configurei a largura da tabela para 100%. Infelizmente, quando o div tem alguma margem, a mesa fica mais larga do que a div.

Eu preciso dar suporte ao IE6 e ao IE7 (já que este é um aplicativo interno), embora eu obviamente goste de uma solução totalmente compatível com navegadores, se possível!

Eu estou usando o seguinte DOCTYPE ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Editar : Infelizmente eu não posso codificar a largura como eu estou gerando dinamicamente o HTML e inclui o aninhamento dos divs recursivamente dentro de si (com margem esquerda em cada div, isso cria um efeito "aninhado" Nice ).

19
Chris Roberts

Adicione o CSS abaixo ao seu <table>:

table-layout: fixed;
width: 100%;
11
Sharad Biradar

O seguinte funciona para mim no Firefox e no IE7 ... uma diretriz, no entanto, é: se você definir a largura em um elemento, não defina margem ou preenchimento no mesmo elemento. Isto é verdade especialmente se você estiver misturando unidades - digamos, misturando porcentagens e pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div style="width: 500px; background-color:#F33;">
      This is the outer div
      <div style="background-color: #FAA; padding: 10px; margin:10px;">
        This is the inner div
        <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr>
            <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Veja aqui para um exemplo.

7
Nate

As larguras baseadas em porcentagem são relativas ao primeiro elemento pai que possui uma largura especificada. Se o seu div não tiver uma largura especificada, a largura da tabela não terá nada a ver com isso. Você pode postar uma versão simplificada da marcação que mostra como é a sua árvore DOM

De outro ângulo, se seu div pai tiver uma largura definida e a margem ainda estiver afetando sua tabela, provavelmente você está no modo quirks. Você especificou sua DOCTYPE, mas esteja ciente de que o elemento DOCTYPE DEVE ser a primeira linha do arquivo. Outra coisa a ser observada ao lidar com IE6, por padrão, se seu conteúdo for mais largo que seu pai, o pai será esticado para acomodar, você pode parar isso adicionando overflow: hidden à sua css para o elemento pai, mas no processo você pode obscurecer parte do conteúdo do elemento filho. 

4
Eric DeLabar

Não tenho certeza qual é o problema aqui - isso funciona bem no IE6/7 e FF3. Definir a largura do elemento DIV do .container define a largura da tabela. Adicionar margens ao div do .container não afeta a tabela. Talvez haja algo mais em sua marcação/CSS que esteja afetando o layout?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>Boxes and Tables</title>
        <style type="text/css">

        div.container {
            background-color: yellow;
            border: 1px solid #000;
            width: 500px;
            margin: 5px auto;
        }

        table.contained {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            border: 2px solid #999;
        }

        </style>
    </head>

    <body>
        <div class="container">
            <table class="contained">
                <thead>
                    <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
                </thead>
                <tbody>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
3
David Heggie

Eu descobri o coração do problema aqui. Tem a ver com border-collapse. Eu tive esse mesmo problema por um tempo agora. Como as tabelas costumam ter bordas finas, o problema não é óbvio para a maioria das pessoas. Se você colocar uma tabela regular com largura definida como 100% dentro de uma div, como Nate, você ficará bem.

No entanto, se você especificar border-collapse:collapse na tabela, a tabela sairá da div. Isso não é óbvio para a maioria das pessoas, pois só pode aparecer em um pixel ou dependendo do contexto e do agente do usuário, talvez não.

Para tornar mais claro o que está acontecendo, tente o seguinte: Coloque o exemplo de Nate ao lado do exemplo de David Heggie em um arquivo html.

Vai parecer que ambos funcionam bem. Mas agora, mude o estilo inline TD de Nate para border: 40px solid blue. Mude o estilo td da tabela de David para border: 40px solid #999;. Nesse ponto, a mesa de David rompe o div em 50% de sua borda em cada lado. Nate ainda trabalha. Coloque um estilo border-collapse:collapse na mesa de Nate e suas pausas agora também.

É o border-collapse que está causando isso!

2
Chris

No caso em que você está gerando automaticamente um código que pode ter margens, adicionar um elemento <div> simples e não estilizado ao agrupar sua tabela pode resolver o problema.

1
Nate

Eu sempre usei <table width="100%">

1
Joe Morgan

O código a seguir funciona no IE6/8, Chrome, Firefox, Safari:

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

Tente copiar e colar e construa nele (apenas mova a parte do estilo para o cabeçalho ou para um arquivo .css separado), talvez a maneira como você está usando para colocar o CSS inline (usando a tag style) tenha algo a ver com o problema, ou é algum outro CSS em torno dos blocos da tabela div? Flutuando também pode causar problemas.

P.S. Eu defino bordas vermelhas e azuis para ver onde as áreas se expandem para uma verificação mais visual.

0
Nestor

Talvez este extenso artigo sobre Internet Explorer e o modelo de caixa CSS ajude?

0
Christian Davén

Esse é o grande problema com a maneira como o CSS trata a propriedade width e o motivo pelo qual a Microsoft implementou o modelo box de maneira diferente no início. A Microsoft perdeu e agora é largura ou margem/preenchimento/borda de um elemento. 

Situação pode mudar para melhor em CSS3 com propriedade de dimensionamento de caixa

0
buti-oxa

estouro: auto; no div mais externo pode ajudar se você está vendo coisas estranhas - como a div externa sendo menor do que você quer ou não ocupando todo o tamanho das divs dentro dela.

0
William

tente isso:

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

definindo o preenchimento do div como zero, você removerá o espaço entre as bordas do div e o conteúdo dele. definindo a largura da tabela para 100% e sua margem para zero, você removerá o espaço entre as bordas da tabela e seu contêiner.

0
farzad

Incidentalmente, há uma boa razão para você não usar o tipo de documento restrito? estrito deve sempre ser o padrão. transitório destina-se apenas ao código legado.

0
Konrad Rudolph