Einstellen der Tabellenspaltenbreite

201

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  css  html-table 
— Alamodey
quelle

Antworten:

318 

<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>
Erweitern Sie das Snippet

— Gordon Gustafson
quelle
5
Wie die Sauberkeit dieser Lösung. Schließen Sie jedoch bitte die Spalte, z. B. <col span = "1" style = "width: 15%;" /> oder <col span = "1" style = "width: 15%;"> </ col>
— lsu_guy
23
@Isu_guy Sie schließen <col> nur, wenn Sie XHTML verwenden - in HTML hat das <col> -Tag kein Schließen ... siehe Link für weitere Informationen. In HTML5 ist <col> ein ungültiges Element, was bedeutet, dass es NICHT geschlossen werden darf
— Matija Nalis
4
@Zulu laut w3schools.com/tags/att_col_width.asp "Das Attribut <col> width wird in HTML5 nicht unterstützt."
— Caltor
30
@Caltor: Der Code verwendet nicht die <col> width attribute; Es wird ein verwendet CSS *style* width, wodurch das Attribut <col> width ersetzt wurde. (Trotz der vielen Leute, die diesen Kommentar hochgestimmt haben !!)
— ToolmakerSteve
4
span="1"ist überflüssig, da 1 die Standardeinstellung ist.
— Madbreaks
128

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.

— Ron DeVera
quelle
Diese Lösung schlägt fehl, wenn Sie Colspans in der ersten Reihe haben
— mark1234
3
Gut, weil <col width = ""> in HTML5 veraltet ist: developer.mozilla.org/en/docs/Web/HTML/Element/col
— Richard
30

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%;
}
— Pete
quelle
Eigentlich müssen Sie nur die Breite der beiden Spalten angeben. Der dritte wird automatisch berechnet, reicht also table{table-layout:fixed};.from,.date{width:15%}aus. Sofern die Klassen nicht auch für andere Elemente verwendet werden, ist das Schreiben th.fromredundant und kann auf nur verkürzt werden .from.
— Tomasz86
14

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>
— DanMan
quelle
Die vorgeschlagene :nth-childLösung ist in Bezug auf die Leistung schrecklich. In diesem Beispiel gibt es keinen gültigen Grund, es zu verwenden (insbesondere mit dem universellen Selektor), wenn nur drei Elemente ( thoder col) zu stylen sind. Außerdem müssen Sie nur die Breite thin der ersten Zeile festlegen . Das .mytable tdim ersten Beispiel ist redundant.
— Tomasz86
"Die vorgeschlagene Lösung für das n-te Kind ist in Bezug auf die Leistung schrecklich." - Zitieren erforderlich.
— DanMan
Dies sollte ausreichen: CSS effizient rendern . Wenn Sie den universellen Selektor verwenden, überprüft der Browser zuerst ALLE Elemente, ob sie das n-te Kind eines anderen Elements sind, ob es sich um ein direktes übergeordnetes Element handelt trund ob sie dazu gehören .mytable. Wenn Sie wirklich "nth" verwenden möchten, ist so etwas wahrscheinlich viel besser : .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. In diesem Fall muss auch die dritte Spaltenbreite nicht angegeben werden.
— Tomasz86
Persönlich würde ich Klassen benutzen oder einfach .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Die "n-ten" Selektoren selbst mögen sehr nützlich sein, aber in diesem speziellen Fall (eine winzige Tabelle mit nur 3 Spalten) werden sie nicht wirklich benötigt. Bei der Verwendung können table-layout: fixedSie sogar genau dies tun : table{table-layout:fixed}th:first-child+th{width:70%}.
— Tomasz86
Das ist mir bewusst. Aber diese Artikel stammen aus früheren Jahren, und es gibt heute größere Probleme als bei CSS-Selektoren, wie große Mengen an Bildern und JS-Code.
— DanMan
8

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>
    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>
    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>
    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>
    Erweitern Sie das Snippet

— tomasz86
quelle
5

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

— Boris Guéry
quelle
5 

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

— Hector David
quelle
4 
<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

— Srinivas Erukulla
quelle
8
Das Attribut col width wird in HTML5 nicht unterstützt.
— Rune
4

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>
— Mailand
quelle
3

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.

— Etienne Perot
quelle
1
Ich würde vermuten, dass der Beispielcode, den das OP und die hilfreichen Stackoverflowians veröffentlicht haben, der Lesbarkeit und Einfachheit halber diente und keineswegs eine Ermutigung für Inline-Stile war.
— Tass
2

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%;
}
— DRD
quelle
2

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>
— Abdus Salam Azad
quelle
0 
style="column-width:300px;white-space: normal;"
— Wut Worawit
quelle
Hallo - willkommen bei Stack Overflow. Im Allgemeinen werden Antworten mit Text (anstelle von nur Code) und einigen Erklärungen als besser angesehen als nur Antworten nur mit Code. Da diese Frage älter ist und viele andere Antworten enthält, können sie Ihnen bei zukünftigen Antworten helfen.
— Jwheron
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.