Spaltenbreite der Tabelle einstellen

Question

Ich habe eine einfache Tabelle, die für einen Posteingang wie folgt verwendet wird:

<table border="1">
     <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

Wie stelle ich die Breite so ein, dass Absender und Datum 15 % der Seitenbreite ausmachen und der Betreff 70 %. Ich möchte auch, dass die Tabelle die gesamte Seitenbreite einnimmt.

Answer 1

Hier ist eine weitere minimale Möglichkeit, dies in CSS zu tun, die sogar in älteren Browsern funktioniert, die keine Unterstützung bieten :nth-child und dergleichen Selektoren: http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

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

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Answer 2

Verwenden Sie das Attribut border nicht, sondern verwenden Sie CSS für alle Ihre Stylinganforderungen.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

Die Einbettung von CSS auf diese Weise ist jedoch eine schlechte Praxis - man sollte stattdessen CSS-Klassen verwenden und die CSS-Regeln in einer externen CSS-Datei speichern.

Answer 3

style="column-width:300px;white-space: normal;"