Frage

Ich versuche, proportional Spaltenbreite mit <col width="x*" /> zu setzen:

<table width="600px">
    <col width="1*" />
    <col width="2*" />
    <col width="3*" />
    <tbody>
        <tr>
            <td style="border: 1px solid black;">AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA
            </td>
            <td style="border: 1px solid black;">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
            </td>
            <td style="border: 1px solid black;">CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC
            </td>
        </tr>
    </tbody>
</table>

Trotz Proportionen in <col> Tag einstellen, sind die Spaltenbreiten gleich. Was ich falsch gemacht?

War es hilfreich?

Lösung

könnten Sie 17% verwenden, 34% und 49%. 1: 2: 3

Andere Tipps

Ich habe versucht, dies in allen wichtigen Browsern zu funktionieren zu bekommen, aber auch gescheitert. Google bringt sehr wenig außer der offiziellen Spezifikation auf.

Ich schließe daraus, dass proportional Spaltenbreite nicht einfach durch eine des Browser-Hersteller unterstützt wird. Sehr seltsam, da wäre es sehr nützlich scheinen im Vergleich zu einigen der mehr esoterischen Dinge, die heute unterstützt wird.

Sie können colgroup verwenden.

WSSchools

  

Das -Tag gibt eine Gruppe von einer oder mehreren Spalten in einer Tabelle   für die Formatierung.

     

Der Tag ist nützlich für Stile ganze Spalt Anwendung,   statt die Stile für jede Zelle, für jede Zeile wiederholt wird.

table {
   width: 100%;
}
td {
   text-align: center;
}
    <table>
        <colgroup>
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 70%;">
        </colgroup>
        <thead>
            <tr>
                <th class="col_3">On stop credit</th>
                <th class="col_3">Rating</th>
                <th class="col_3">Customer Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Value</td>
                <td>Value</td>
                <td>Long text value</td>
            </tr>
        </tbody>
    </table>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top