Wie man eine HTML-Tabelle (in einem fixed-width-div) Anpassung an die Breite der Zellen statt dessen den container?

Ich möchte folgende Tabelle, in der die Anpassung der Breite der Zellen, statt dessen container:

<div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

Die Breite des Containers ist geringer als die Summe der Zelle Breite. Es ist okay, um zu zeigen, horizontale Bildlaufleiste hier, aber die Tabelle kann einfach nicht breiter sein als die seines Containers. Wenn ich die Berechnung der Summe der Breite für die colspan und die Tabelle, es kann die Arbeit zu tun, aber was ist, wenn die Zellen mit nicht-px Breite, wie "%" oder "em"? Dann statische px Berechnung nicht arbeiten kann.

Aktuellen Effekt ist:
Wie man eine HTML-Tabelle (in einem fixed-width-div) Anpassung an die Breite der Zellen statt dessen den container?
Der erwartete Effekt wäre der Tisch Breite von mehr als der div-container ist die Breite.

Aber wenn Sie die Breite direkt in die Tabelle hat auch Probleme: die Breite einstellen für Zellen werden ignoriert. Zum Beispiel:

    <div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed; width: 900px;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

Der Effekt ist:
Wie man eine HTML-Tabelle (in einem fixed-width-div) Anpassung an die Breite der Zellen statt dessen den container?
Hinweis: die 2. Zelle (sollte 200px) ist so schmal wie der 1. und 3. einem.

Jeder kann etwas Licht auf dieses Problem? Vielen Dank im Voraus.

InformationsquelleAutor Oliver | 2013-03-06
  1. 3

    hinzufügen von css:

    th{
    min-width:50px; /*for instance*/
}
div{
    overflow-x:scroll;
}

    und entfernen style='table-layout: fixed; width: 1px;' aus der Tabelle

    • übrigens, ich bin nicht sicher, ob das A B C ist zufrieden, wenn das so ist, nicht mit TH für table-Inhalte. TH bedeutet table header, und ist gut für die Gruppe Namen, aber der rest sollte dann TD. Nur für den Fall
    • Es ist der header-Teil einer größeren Tabelle "widget", all dies sind die header-Zellen.
    • bitte ignorieren Sie die width:1px; das ist einige testen von code. Ich klebte hier durch Fehler.
    • Vielen Dank für die Beratung. Die min-Breite Ansatz funktioniert in den meisten Browsern scheitert aber im IE7. Vielleicht brauche ich, um mit meinem Chef zu verweigern Unterstützung von IE7...
    • Ja nicht belästigt werden mit IE7, die wenigen, die es verwenden, IE7 sind wohl auch nicht Ihre Zielgruppe
    InformationsquelleAutor Hacktisch
  2. 0

    Würden Positionierung der Tabelle absolut acceptible?

    <table border="1" style="position:absolute;">

    Dies funktioniert so, dass der div nicht mehr enthält, die Tabelle horizontal. Aber, natürlich, das div auch nicht mehr mit der Tabelle senkrecht. Sie könnten dies umgehen, indem Sie die div-Höhe manuell ein, wenn.

    • Die manuelle Einstellung der Höhe ist auch schwer, in meinem Fall, weil den Inhalt der Tabelle ändert. Aber auch die Einstellung zu den absoluten scheint es immer noch nicht funktionieren kann, weil die container werden muss "position: relative;"
    • Ah, ja, du hast Recht.
    InformationsquelleAutor MikeL
  3. 0

    Merijn die Antwort, die funktioniert, optimiert, leicht, für die fixed-width-Zellen Gehäuse:

    Anstatt der Angabe eines globalen th min-width geben Sie es pro Zelle etwa so:

    <th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>

    Zumindest diese Weise, Ihre individuelle Breite der nicht ignoriert werden, so dass Sie eine Tabelle breiter ist als der container, und mit unregelmäßiger Breite Zellen.

    • ja, wenn es keine bessere Wahl für IE7, werde ich diesem Ansatz.
    InformationsquelleAutor MikeL
Schreibe einen Kommentar