Tabelle mit table-layout: fixed; und wie man eine Spalte breiter

Also ich habe eine Tabelle mit diesem Stil:

table-layout: fixed;

Bei der alle Spalten die gleiche Breite. Ich möchte eine Spalte (die erste) breiter zu sein und dann den rest der Spalten zu besetzen, um die Verbleibende Breite der Tabelle mit gleich breiten.

Wie zu erreichen?

CSS:

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

HTML:

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

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

Ankündigung der ersten Spalte, ich will, dass es 300px breit.

InformationsquelleAutor Richard Knop | 2011-06-06

69

Sie konnte nur geben Sie die erste Zelle (also Spalte) eine Breite haben und der rest standardmäßig auto

CSS:
```
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}
```
HTML:
```
<table>
  <tr>
    <td>150px</td>
    <td>equal</td>
    <td>equal</td>
  </tr>
</table>
```
oder alternativ der "richtige Weg", um die Spaltenbreite möglicherweise die Verwendung der die Spalte - element sich

CSS:
```
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.wide {
  width: 150px;
}
```
HTML:
```
<table>
  <col span="1" class="wide">
    <tr>
      <td>150px</td>
      <td>equal</td>
      <td>equal</td>
    </tr>
</table>
```
- Funktioniert das mit der Tabelle in der mein jsfiddle-link?
- ja scheint - die sicherlich col Technik ohnehin tut: **siehe aktualisierte fiddle - und mit dem colspan-Methode können Sie dann auf eine andere Spaltenbreite als erforderlich zu
- Wenn Sie eine thead die Breite sollte auf seinen th
- Funktioniert nicht, wenn es eine Tabelle Beschriftung zur Verfügung: <table><caption>...</caption><tbody>....</tbody></table>
InformationsquelleAutor clairesuzy

Die wichtigste Sache des table-layout: fixed ist, dass die Spaltenbreiten festgelegt werden, indem die erste Zeile der Tabelle.

wenn Sie Ihre Tabellenstruktur ist wie folgt (standard-Tabelle Struktur)

<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 möchten, geben Sie eine Breite der zweiten Spalte, dann

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

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

</style>

Bitte schauen, dass wir den Stil der th nicht den td.

Stil th mein Problem behoben, vielen Dank
guter Tipp - table tr th:nth-child(4)

InformationsquelleAutor kta

6

Erstellen Sie eine sehr große Tabelle (Hunderte von Zeilen und Spalten)? Wenn dem so ist, table-layout: fixed; ist eine gute Idee, wie der browser braucht nur zu Lesen, die erste Zeile, um zu berechnen und das ganze Rendern table, damit es schneller geladen.

Aber wenn nicht, würde ich vorschlagen, dumping table-layout: fixed; und ändere deine css wie folgt:
```
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/
- Das funktioniert nicht richtig. Blick auf 8,9,10,11 Spalten, Sie sind zu schmal.
- gotcha. Sie können das Problem beheben, dass durch die überführung der Inhalte in die td erstreckt sich über die vier ths so: <div style="width:80px;">Richard Knop</div> Legen Sie die width um die Summe aller einzelnen tds. Siehe hier jsfiddle.net/6p9K3/2
InformationsquelleAutor Jason Gennaro
3

Was Sie tun könnten, ist so etwas wie diese (pseudocode):
```
<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>
```
Grundsätzlich der Aufteilung der Tabelle in zwei Tabellen habe und es enthalten von einem anderen Tisch.
- geschachtelte Tabellen werden am besten Tabellen
InformationsquelleAutor kei

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.