Tisch mit Tabellenlayout: fest; und wie man eine Spalte breiter macht

80

Also habe ich einen Tisch mit diesem Stil:

table-layout: fixed;

Dadurch haben alle Spalten die gleiche Breite. Ich möchte, dass eine Spalte (die erste) breiter ist und der Rest der Spalten die verbleibende Breite der Tabelle mit gleichen Breiten belegt.

Wie erreicht man das?

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  background: #ddd;
  table-layout: fixed;
}

table th, table td {
  border: 1px solid #000;
}

table td.wideRow, table th.wideRow {
  width: 300px;
}
<table class="CalendarReservationsBodyTable">
  <thead>
    <tr>
      <th colspan="97">Rezervovane auta</th>
    </tr>
    <tr>
      <th class="corner wideRow">Auto</th>
      <th class="odd" colspan="4">0</th>
      <th class="" colspan="4">1</th>
      <th class="odd" colspan="4">2</th>
      <th class="" colspan="4">3</th>
      <th class="odd" colspan="4">4</th>
      <th class="" colspan="4">5</th>
      <th class="odd" colspan="4">6</th>
      <th class="" colspan="4">7</th>
      <th class="odd" colspan="4">8</th>
      <th class="" colspan="4">9</th>
      <th class="odd" colspan="4">10</th>
      <th class="" colspan="4">11</th>
      <th class="odd" colspan="4">12</th>
      <th class="" colspan="4">13</th>
      <th class="odd" colspan="4">14</th>
      <th class="" colspan="4">15</th>
      <th class="odd" colspan="4">16</th>
      <th class="" colspan="4">17</th>
      <th class="odd" colspan="4">18</th>
      <th class="" colspan="4">19</th>
      <th class="odd" colspan="4">20</th>
      <th class="" colspan="4">21</th>
      <th class="odd" colspan="4">22</th>
      <th class="" colspan="4">23</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="alignRight wideRow">KE-260 FC - Octavia combi</td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td colspan="16" class="highlighted borderLeft" title="Richard Knop">
        Richard Knop
      </td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td colspan="14" class="highlighted" title="Richard Knop">
        Richard Knop
      </td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
    </tr>
  </tbody>
</table>
Erweitern Sie das Snippet

jsfiddle: http://jsfiddle.net/6p9K3/

Beachten Sie die erste Spalte, ich möchte, dass sie 300pxbreit ist.

html  css  xhtml 
— Richard Knop
quelle

Antworten:

87

Sie können der ersten Zelle (daher Spalte) einfach eine Breite geben und den Rest standardmäßig verwenden auto

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}
<table>
  <tr>
    <td>150px</td>
    <td>equal</td>
    <td>equal</td>
  </tr>
</table>
Erweitern Sie das Snippet

oder alternativ könnte der "richtige Weg", um Spaltenbreiten zu erhalten, darin bestehen, das colElement selbst zu verwenden

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.wide {
  width: 150px;
}
<table>
  <col span="1" class="wide">
    <tr>
      <td>150px</td>
      <td>equal</td>
      <td>equal</td>
    </tr>
</table>
Erweitern Sie das Snippet

— clairesuzy
quelle
ja scheint - sicherlich coltut die Technik sowieso: ** siehe aktualisierte Geige - und mit der Colspan-Methode könnten Sie dann bei Bedarf auch andere Spaltenbreiten
— einstellen
13
Wenn Sie eine haben, sollte theaddie Breite auf seine eingestellt werdenth
— Jonathan de M.
Funktioniert nicht, wenn eine Tabellenbeschriftung verfügbar ist: <table><caption>...</caption><tbody>....</tbody></table>
— Malisokan
2
Einfach benutzen td:first-of-type { width: 150px; }. Keine zwei Selektoren erforderlich. Beachten Sie auch, dass die erste Zeile der Tabelle mit table-layout: fixeddie Breite bestimmt.
— Zach Saucier
1
@ZachSaucier macht hier einen wirklich wichtigen Punkt, der leicht zu übersehen ist. Sie können angeben, in welcher Zeile der Browser nach Breiten suchen soll, indem Sie das Tabellenlayout festlegen: fest auf diese bestimmte Zeile festgelegt. Überall sonst sah ich nur "es fängt an, auf die erste Zelle zu schauen".
— J215D
42

Das Wichtigste beim Tabellenlayout: Fest ist, dass die Spaltenbreiten durch die erste Zeile der Tabelle bestimmt werden.

Damit

wenn Ihre Tabellenstruktur wie folgt ist (Standardtabellenstruktur)

<table>
  <thead>
      <tr>
          <th> First column </th>
          <th> Second column </th>
          <th> Third column </th>        
      </tr>
  </thead>

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

Wenn Sie der zweiten Spalte eine Breite geben möchten, dann

<style> 
    table{
        table-layout:fixed;
        width: 100%;
    }

    table tr th:nth-child(2){
       width: 60%;
     }

</style>

Bitte schauen Sie, dass wir das th nicht das td stylen.

— kta
quelle
2
großer Tipp tr th: n-tes Kind (4)
— Paramvir Singh Karwal
7

Erstellen Sie eine sehr große Tabelle (Hunderte von Zeilen und Spalten)? Wenn ja, table-layout: fixed;ist dies eine gute Idee, da der Browser nur die erste Zeile lesen muss, um das gesamte zu berechnen und zu rendern table, sodass es schneller geladen wird.

Wenn nicht, würde ich vorschlagen table-layout: fixed;, Ihr CSS wie folgt zu entleeren und zu ändern:

table th, table td{
border: 1px solid #000;
width:20px;  //or something similar   
}

table td.wideRow, table th.wideRow{
width: 300px;
}

http://jsfiddle.net/6p9K3/1/

— Jason Gennaro
quelle
1
Das funktioniert nicht richtig. Schauen Sie sich 8,9,10,11 Spalten an, sie sind zu schmal.
— Richard Knop
Erwischt. Sie können dies beheben, indem Sie den Inhalt wie tdfolgt in die vier ths einfügen: <div style="width:80px;">Richard Knop</div> Setzen Sie die widthauf die Summe aller einzelnen tds. Siehe hier jsfiddle.net/6p9K3/2
— Jason Gennaro
3

Was Sie tun könnten, ist so etwas (Pseudocode):

<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>

Teilen Sie die Tabelle grundsätzlich in zwei Tabellen auf und lassen Sie sie in einer anderen Tabelle enthalten.

— Kei
quelle
23
verschachtelte Tabellen sind die besten Tabellen
— user1721135
Ich weiß, dass dies ein Pseudocode ist, aber als HTML-Framework wie Pug.js wäre dies absolut fantastisch!
— Alistair
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.