Spaltenbreite der Tabelle einstellen

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

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

Wie ich die Breite, so das Aus Datum und Uhrzeit werden 15% der Seitenbreite und das Thema ist 70%. Ich will auch den Tisch zu nehmen, bis die gesamte Breite der Seite angezeigt.

InformationsquelleAutor der Frage alamodey | 2009-05-30

110

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 ist, um Ihre HTML-und CSS-getrennt für weniger code-Duplizierung, und für die Trennung von Bereichen (HTML für die Struktur und Semantik, und CSS für die Präsentation).

Beachten Sie, dass für diese arbeiten, die in älteren Versionen von Internet Explorer, die Sie haben können und geben Sie Ihrer Tabelle eine bestimmte Breite (z.B. 900px). Dieser browser hat einige Probleme mit dem Rendern eines Elements mit prozentualen Maßen, wenn seine Hülle nicht die genauen Abmessungen.

InformationsquelleAutor der Antwort Ron DeVera
21

Verwenden Sie die CSS-unten, die erste Erklärung wird sichergestellt, dass Ihre Tabelle sticks auf die breiten, die Sie (müssen Sie die Klassen in Ihre HTML):
```
table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}
```
InformationsquelleAutor der Antwort Pete

Alternative Möglichkeit mit nur einer Klasse, wobei die Stile in einer CSS-Datei, die funktioniert sogar im IE7:

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

Mehr kürzlich, Sie können auch die nth-child() von CSS3-Selektor (IE9+), wo Sie würden einfach die nr. der jeweiligen Spalte in der Klammer statt bespannen Sie zusammen mit der benachbarten Selektor. Wie diese 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>

InformationsquelleAutor der Antwort DanMan

Je nach Ihren Körper (oder die div, die Verpackung Ihrer Tabelle) 'Einstellungen' 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

InformationsquelleAutor der Antwort Boris Guéry

<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

InformationsquelleAutor der Antwort Srinivas Erukulla

3

Nicht verwenden, wird das border-Attribut, verwenden Sie CSS für alle Ihre styling-Wünsche.
```
<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>
```
Aber die Einbettung von CSS wie das ist schlechte Praxis, und man sollte die Verwendung von CSS-Klassen statt, und setzen Sie die CSS-Regeln in einer externen CSS-Datei.

InformationsquelleAutor der Antwort Etienne Perot

Versuchen, diese 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>

InformationsquelleAutor der Antwort Milan

Hier ist noch ein minimaler Weg, es zu tun in CSS, die funktioniert auch in älteren Browsern, die keine Unterstützung :nth-child und wie 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%;
}

InformationsquelleAutor der Antwort DRD

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.