Einstellen der Tabellenspaltenbreite

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>

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

HTML:

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

CSS:

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

Die beste Vorgehensweise besteht darin, HTML und CSS getrennt zu halten, um weniger Code zu duplizieren und Bedenken zu trennen (HTML für Struktur und Semantik und CSS für Präsentation).

Beachten Sie, dass Sie Ihrer Tabelle möglicherweise eine bestimmte Breite (z. B. 900 Pixel) zuweisen müssen, damit dies in älteren Versionen von Internet Explorer funktioniert. Dieser Browser hat einige Probleme beim Rendern eines Elements mit prozentualen Abmessungen, wenn sein Wrapper keine genauen Abmessungen hat.

Verwenden Sie das folgende CSS. Die erste Deklaration stellt sicher, dass Ihre Tabelle die von Ihnen angegebenen Breiten einhält (Sie müssen die Klassen in Ihrem HTML-Code hinzufügen):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Alternative Möglichkeit mit nur einer Klasse, während Ihre Stile in einer CSS-Datei gespeichert werden, die sogar in IE7 funktioniert:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

In jüngerer Zeit können Sie auch den nth-child()Selektor von CSS3 (IE9 +) verwenden, in den Sie nur die Nummer eingeben würden. der jeweiligen Spalte in die Klammer, anstatt sie mit dem benachbarten Selektor zu verbinden. So zum Beispiel:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Dies sind meine beiden Vorschläge.

1. Klassen verwenden. Die Breite der beiden anderen Spalten muss nicht angegeben werden, da sie vom Browser automatisch auf jeweils 15% festgelegt werden.

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

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

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

2. Ohne Klassen zu benutzen. Drei verschiedene Methoden, aber das Ergebnis ist identisch.

   ein)

       table { table-layout: fixed; }
       th+th { width: 70%; }
       th+th+th { width: 15%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

   b)

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

   c) Dieser ist mein Favorit. Wie b), jedoch mit besserer Browserunterstützung.

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

Abhängig von Ihrem Körper (oder dem Div, der Ihre Tabelle umhüllt) sollten Sie in der Lage sein, dies zu tun:

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

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Demo

Versuchen Sie dies stattdessen.

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

Verwenden Sie nicht das Rahmenattribut, sondern CSS für alle Ihre Styling-Anforderungen.

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

Das Einbetten von CSS ist jedoch eine schlechte Praxis - man sollte stattdessen CSS-Klassen verwenden und die CSS-Regeln in eine externe CSS-Datei einfügen.

Hier ist eine weitere minimale Möglichkeit, dies in CSS zu tun, die auch in älteren Browsern funktioniert, die keine :nth-childund ähnliche Selektoren unterstützen: 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%;
}

Fügen Sie colgroup nach Ihrem Tabellen-Tag hinzu. Definieren Sie hier die Breite und Anzahl der Spalten. und füge tbody tag hinzu. Stecke dein Tr in den Körper.

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

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