it-swarm.it

Come faccio a rendere una tabella HTML della stessa larghezza del suo tag div contenente?

Ho un tavolo dentro un div. Voglio che la tabella occupi l'intera larghezza del tag div.

Nel CSS, ho impostato la larghezza della tabella al 100%. Sfortunatamente, quando il div ha qualche margine su di esso, il tavolo finisce più largo del div in cui è.

Devo supportare IE6 e IE7 (dato che si tratta di un'app interna), anche se ovviamente mi piacerebbe una soluzione completamente cross-browser, se possibile!

Sto usando il seguente DOCTYPE ...

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

Edit : Sfortunatamente non posso hardcodificare la larghezza perché sto generando dinamicamente l'HTML e include annidare i div ricorsivamente l'uno dentro l'altro (con margine sinistro su ogni div, questo crea un piacevole effetto 'annidato' ).

19
Chris Roberts

Aggiungi il seguente CSS al tuo <table>:

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

Il seguente funziona per me in Firefox e IE7 ... una linea guida, tuttavia è: se si imposta la larghezza su un elemento, non impostare margine o riempimento sullo stesso elemento. Questo è vero specialmente se stai mescolando le unità - ad esempio, mescolando percentuali e pixel.

<!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>

Vedi qui per un esempio.

7
Nate

Le larghezze basate sulla percentuale sono relative al primo elemento genitore che ha una larghezza specificata. Se il tuo div non ha una larghezza specificata, la larghezza della tabella non ha nulla a che fare con essa. Puoi pubblicare una versione semplificata del markup che mostra come appare l'albero DOM

Da un altro angolo, se il tuo genitore div ha una larghezza impostata e il margine sta ancora influenzando la tua tabella allora probabilmente stai in modalità stranezze. Hai specificato DOCTYPE, ma ricorda che l'elemento DOCTYPE DEVE essere la prima riga del file. Qualcos'altro da notare quando si ha a che fare con IE6, per impostazione predefinita, se il contenuto è più ampio di quello genitore, il genitore verrà allungato per adattarlo, è possibile interrompere questo aggiungendo overflow: hidden al proprio css per l'elemento genitore ma nel processo si potrebbe oscurare alcuni dei contenuti dell'elemento figlio. 

4
Eric DeLabar

Non sono sicuro di quale sia il problema qui - questo funziona bene in IE6/7 e FF3. L'impostazione della larghezza dell'elemento DIV .container imposta la larghezza della tabella. L'aggiunta di margini al div .container non influisce sulla tabella. Forse c'è qualcos'altro nel tuo markup/CSS che sta influenzando il 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

Ho capito il cuore del problema qui. Ha a che fare con border-collapse. Ho avuto questo stesso problema per un po 'di tempo. Poiché i tavoli hanno spesso bordi sottili, il problema non è ovvio per la maggior parte delle persone. Se metti una tabella regolare con larghezza impostata al 100% all'interno di un div, come Nate ha, starai bene.

Tuttavia, se si specifica border-collapse:collapse sulla tabella, la tabella uscirà dal div. Questo non è ovvio per la maggior parte delle persone, perché potrebbe scoppiare solo di un pixel o, a seconda del contesto in cui si trova e dell'agente utente, forse non del tutto.

Per chiarire cosa sta succedendo, prova questo: metti l'esempio di Nate accanto all'esempio di David Heggie in un file html.

Sembrerà che entrambi funzionino bene. Ma ora, cambia lo stile in linea di Nate TD su border: 40px solid blue. Cambia la tabella di David td style in border: 40px solid #999;. A questo punto, il tavolo di David rompe il div dal 50% del suo margine su ciascun lato. Nate funziona ancora. Ora metti uno stile border-collapse:collapse sul tavolo di Nate e le sue pause.

È il border-collapse che lo sta causando!

2
Chris

Nel caso in cui stai generando automaticamente codice che potrebbe avere margini su di esso, aggiungere un semplice elemento <div> unstyled che avvolge il tuo tavolo potrebbe fare il trucco.

1
Nate

Ho sempre usato <table width="100%">

1
Joe Morgan

Il seguente codice funziona su 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>

Prova a copiare e incollare e creare su di esso (basta spostare la parte di stile nell'intestazione o in un file .css separato), forse il modo in cui si utilizza il mettere il CSS in linea (usando il tag di stile) ha qualcosa a che fare con il problema, o è qualche altro CSS che circonda i blocchi di tabella div? Anche galleggiare può dare problemi.

Post scriptum Ho impostato i bordi rosso e blu per vedere dove si espandono le aree per un controllo più visivo.

0
Nestor

Forse questo ampio articolo su Internet Explorer e il modello di box CSS aiuterà?

0
Christian Davén

Questo è il grosso problema con il modo in cui il CSS tratta la proprietà width e il motivo per cui Microsoft ha implementato il modello di box in modo diverso all'inizio. Microsoft ha perso, e ora è o larghezza o margine/riempimento/bordo per un elemento. 

La situazione potrebbe cambiare in CSS3 con proprietà di dimensionamento della casella

0
buti-oxa

overflow: auto; sul div più esterno può essere d'aiuto se vedi cose strane - come la div più esterna essendo più piccola di quanto tu voglia o non prendendo l'intera dimensione delle div all'interno di essa.

0
William

prova questo:

div {
 padding: 0px;
}

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

impostando il padding del div su zero, rimuoverai lo spazio tra i bordi del div e il suo contenuto. impostando la larghezza della tabella al 100% e il margine a zero, rimuoverai lo spazio tra i bordi della tabella e il suo contenitore.

0
farzad

Per inciso, c'è una buona ragione per non usare il rigoroso doctype? strict dovrebbe sempre essere il default. transitorio è inteso solo per il codice legacy.

0
Konrad Rudolph