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

Hinzufügen colgroup nach Ihrem table Tag. Definieren Sie width und die Anzahl der Spalten ein, und fügen Sie die tbody Tag. Setzen Sie Ihr tr innerhalb von tbody .

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>

    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

Answer 2

Je nach den "Einstellungen" Ihres Körpers (oder des Divs, das Ihre Tabelle umschließt) sollten Sie dies tun können:

body {
  width: 98%;
}

table {
  width: 100%;
}

th {
  border: 1px solid black;
}

th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}

<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

Demo

Answer 3

Versuchen Sie stattdessen dies.

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

Answer 4

    table { table-layout: fixed; }
    .subject { width: 70%; }

    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

Answer 5

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%;
}