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

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

    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Answer 2

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

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

Die beste Praxis ist, dass Sie Ihre HTML y CSS getrennt, um Code-Duplizierung zu vermeiden und um eine Trennung der Bereiche zu erreichen ( HTML für Struktur und Semantik, und CSS für die Präsentation).

Damit dies in älteren Versionen des Internet Explorers funktioniert, müssen Sie Ihrer Tabelle möglicherweise eine bestimmte Breite geben (z. B. 900 Pixel). Dieser Browser hat einige Probleme mit der Darstellung eines Elements mit prozentualen Abmessungen, wenn sein Wrapper keine genauen Abmessungen hat.

Answer 3

Die erste Deklaration sorgt dafür, dass die 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%;
}

Answer 4

Alternative Möglichkeit mit nur einer Klasse, wobei die Stile in einer CSS-Datei verbleiben, die sogar im 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>

Seit kurzem können Sie auch die nth-child() Selektor aus CSS3 (IE9+), bei dem man einfach die Nummer der jeweiligen Spalte in die Klammer setzt, anstatt sie mit dem angrenzenden Selektor aneinanderzureihen. Zum Beispiel so:

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

Answer 5

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

       table { table-layout: fixed; }
       .subject { width: 70%; }
   
       <table>
         <tr>
           <th>From</th>
           <th class="subject">Subject</th>
           <th>Date</th>
         </tr>
       </table>

2. Ohne Verwendung von Klassen. Drei verschiedene Methoden, aber das Ergebnis ist identisch.

   a)

       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>

   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>

   c) Das hier ist mein Favorit. Gleich wie b), aber 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>