it-swarm-eu.dev

Wie erstelle ich eine HTML-Tabelle mit der Breite ihres enthaltenden div-Tags?

Ich habe einen Tisch in einem Div. Ich möchte, dass die Tabelle die gesamte Breite des div-Tags einnimmt.

In der CSS habe ich die Breite der Tabelle auf 100% gesetzt. Leider ist der Tisch breiter als der Div, in dem er sich befindet, wenn der Div einen gewissen Spielraum hat.

Ich muss IE6 und IE7 unterstützen (da dies eine interne App ist), obwohl ich offensichtlich eine vollständig browserübergreifende Lösung möchte, wenn dies möglich ist!

Ich benutze den folgenden DOCTYPE ...

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

Bearbeiten : Leider kann ich die Breite nicht fest codieren, da ich den HTML-Code dynamisch generiere. Dazu gehört, dass die Divs rekursiv ineinander verschachtelt werden ).

19
Chris Roberts

Fügen Sie das folgende CSS zu Ihrem <table> hinzu:

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

Folgendes funktioniert für mich in Firefox und IE7 ... Eine Richtlinie ist jedoch: Wenn Sie die Breite für ein Element festlegen, setzen Sie keinen Rand oder Abstand für dasselbe Element. Dies gilt für insbesondere wenn Sie Einheiten mischen - beispielsweise Prozent und 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>

Siehe hier für ein Beispiel.

7
Nate

Prozentbasierte Breiten beziehen sich auf das erste übergeordnete Element, für das eine Breite angegeben wurde. Wenn für das div keine Breite festgelegt wurde, hat die Breite der Tabelle nichts damit zu tun. Können Sie eine vereinfachte Version des Markups posten, die zeigt, wie Ihr DOM-Baum aussieht? 

Wenn Sie aus einem anderen Blickwinkel die Breite der übergeordneten div-Tabelle haben und der Rand weiterhin Ihre Tabelle beeinflusst, befinden Sie sich wahrscheinlich im Quirks-Modus. Sie haben Ihre DOCTYPE angegeben, beachten Sie jedoch, dass das DOCTYPE-Element die erste Zeile der Datei sein muss. Beachten Sie beim Umgang mit IE6 standardmäßig, wenn Ihr Inhalt breiter als Ihr übergeordnetes Element ist. Das übergeordnete Element wird entsprechend angepasst. Sie können dies beenden, indem Sie overflow: hidden zu Ihrer css für das übergeordnete Element hinzufügen. In diesem Prozess können Sie jedoch unklar sein einige Inhalte des untergeordneten Elements. 

4
Eric DeLabar

Nicht wirklich sicher, was das Problem hier ist - das funktioniert gut in IE6/7 und FF3. Durch das Festlegen der Breite des DIV-Elements .container wird die Breite der Tabelle festgelegt. Das Hinzufügen von Rändern zur .container -Datei wirkt sich nicht auf die Tabelle aus. Vielleicht enthält Ihr Markup/CSS etwas anderes, das das Layout beeinflusst?

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

Ich habe hier das Herz des Problems herausgefunden. Es hat mit border-collapse zu tun. Ich hatte schon eine Weile dasselbe Problem. Da Tische oft dünne Grenzen haben, ist das Problem für die meisten Menschen nicht offensichtlich. Wenn Sie eine reguläre Tabelle mit einer Breite von 100% in ein Div setzen, wie Nate dies tut, ist alles in Ordnung.

Wenn Sie jedoch border-collapse:collapse in der Tabelle angeben, wird die Tabelle aus dem div ausbrechen. Dies ist für die meisten Benutzer nicht offensichtlich, da es möglicherweise nur um ein Pixel ausbricht oder je nach Kontext und Benutzeragenten möglicherweise nicht.

Um zu verdeutlichen, was los ist, versuchen Sie Folgendes: Stellen Sie das Beispiel von Nate in einer HTML-Datei neben das Beispiel von David Heggie.

Es sieht so aus, als würden beide funktionieren. Ändern Sie nun Nates Inline-Stil TD in border: 40px solid blue. Ändern Sie Davids Tabellenstil in border: 40px solid #999;. An diesem Punkt bricht Davids Tisch auf jeder Seite um 50% seiner Grenze aus dem Div heraus. Nates funktioniert immer noch. Setzen Sie Nates Tisch auf einen border-collapse:collapse-Stil und seine Pausen jetzt auch.

Es ist der border-collapse, der es verursacht!

2
Chris

In dem Fall, in dem Sie automatisch Code generieren, der möglicherweise Ränder enthält, kann das Hinzufügen eines einfachen, nicht formatierten <div>-Elements, das Ihre Tabelle umgibt, den Trick erfüllen.

1
Nate

Ich habe immer <table width="100%"> verwendet

1
Joe Morgan

Der folgende Code funktioniert auf IE6/8, Chrome, Firefox und 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>

Versuchen Sie es mit Kopieren und Einfügen und bauen Sie darauf (verschieben Sie den Stilteil einfach in die Kopfzeile oder in eine separate .css-Datei). Vielleicht hat die Art, wie Sie das CSS-Inline-Setzen (mit dem style-Tag) verwenden, etwas mit dem Problem zu tun. oder ist es ein anderes CSS, das die div-Tabellenblöcke umgibt? Floating kann auch Probleme bereiten.

P.S. Ich habe rote und blaue Ränder gesetzt, um zu sehen, wo sich die Bereiche für eine visuellere Überprüfung erweitern.

0
Nestor

Vielleicht hilft dieser umfangreiche Artikel über Internet Explorer und das CSS-Boxmodell ?

0

Das ist das große Problem mit der Art und Weise, wie CSS die width-Eigenschaft behandelt, und den Grund, warum Microsoft das Box-Modell zunächst anders implementiert hat. Microsoft hat verloren, und jetzt ist es für ein Element entweder Breite oder Rand/Füllung/Rand. 

In CSS3 kann sich die Situation möglicherweise ändern, wenn die Eigenschaft " box-size" verwendet wird.

0
buti-oxa

Überlauf: Auto; Auf dem äußersten div kann es hilfreich sein, wenn Sie seltsame Dinge sehen - zum Beispiel, dass das äußerste div kleiner ist, als Sie möchten, oder nicht die gesamte Größe der divs in sich nimmt.

0
William

versuche dies:

div {
 padding: 0px;
}

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

wenn Sie die Auffüllung des div auf null setzen, entfernen Sie den Abstand zwischen den Grenzen des div und dessen Inhalt. Wenn Sie die Breite der Tabelle auf 100% und den Rand auf Null setzen, entfernen Sie den Abstand zwischen den Rändern der Tabelle und ihres Containers.

0
farzad

Gibt es übrigens einen guten Grund, warum Sie den strengen Doctype nicht verwenden? strict sollte immer die Standardeinstellung sein. Übergang ist nur für Altcode vorgesehen.

0
Konrad Rudolph