Dimensionierung der Tabellenspalte

94

In Bootstrap 3könnte ich col-sm-xxnach Belieben auf die thTags in den theadTabellenspalten anwenden und deren Größe ändern. Dies funktioniert jedoch nicht in Bootstrap 4. Wie kann ich so etwas in Bootstrap 4 erreichen?

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

Wenn Sie sich den Codeply ansehen, wird er nicht richtig dimensioniert, insbesondere wenn Sie der Tabelle einige Daten hinzufügen. Sehen Sie, wie das läuft:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>
Killerpixler
quelle
1
Als Ergänzung zu dieser Frage: Wenn Sie lange Inhalte (z. B. sehr lange URLs) zum Anzeigen der Bootstrap 4-Tabellen haben, ist dies selbst mit der unten stehenden Antwort auf die Größenbestimmung keine gute Lösung. Entweder die Verwendung einer Flex-Row- oder Row / Col-Lösung funktioniert besser mit Überlauf und Textumbruch
Killerpixler

Antworten:

151

Aktualisiert 2018

Stellen Sie sicher, dass Ihre Tabelle die tableKlasse enthält. Dies liegt daran, dass Bootstrap 4-Tabellen "opt-in" sind, sodass die tableKlasse absichtlich zur Tabelle hinzugefügt werden muss.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x hatte auch etwas CSS, um die Tabellenzellen zurückzusetzen, damit sie nicht schweben.

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

Ich weiß nicht, warum dies nicht Bootstrap 4 Alpha ist, aber es kann in der endgültigen Version wieder hinzugefügt werden. Durch Hinzufügen dieses CSS können alle Spalten die im thead.. festgelegten Breiten verwenden .

Bootstrap 4 Alpha 2 Demo


UPDATE (ab Bootstrap 4.0.0)

Da Bootstrap 4 nun Flexbox ist, nehmen die Tabellenzellen beim Hinzufügen nicht die richtige Breite an col-*. Eine Problemumgehung besteht darin, die d-inline-blockKlasse in den Tabellenzellen zu verwenden, um die Standardanzeige zu verhindern: Flex von Spalten.

Eine weitere Option in BS4 ist die Verwendung der Sizing Utils-Klassen für die Breite ...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Bootstrap 4 Alpha 6 Demo

Zuletzt können Sie d-flexdie Tabellenzeilen (tr) und die col-*Rasterklassen in den Spalten (th, td) verwenden ...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Bootstrap 4.0.0 (stabil) Demo

Hinweis: Ändern des anzuzeigenden TR: Flex kann die Ränder ändern

Zim
quelle
Eigentlich passt das nicht richtig. Probieren Sie es aus, wenn Sie einige Rahmen hinzufügen, um zu sehen, wie die Größe ist, und wenn Sie dem Körper eine Zeile hinzufügen. Ich habe den Code in die Frage gestellt
Killerpixler
Tatsächlich funktioniert Ihr BS4-A6-Beispiel nicht, wenn Sie überfüllten Inhalt in einer Spalte haben, da die anderen Spalten nicht erweitert sind. Versuchen Sie, etwas Lorem Ipsum in eine Spalte einzufügen.
Killerpixler
1
Ihre Lösung hat funktioniert. In meinem Fall musste ich keine Dachrinnen in die Tr einfügen
Vimalan Jaya Ganesh
Ja, die w-25, w-50und w-75Klassen arbeiten mit Bootstrap 4. Dank!
Olidem
24

Eine weitere Option besteht darin, das Flex-Styling auf die Tabellenzeile anzuwenden und die col-classesElemente der Tabellenüberschrift / Tabellendaten hinzuzufügen :

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>
Jacob van Lingen
quelle
Funktioniert, funktioniert aber vertical-align: middlenicht mehr mit d-flexKlasse.
Eva
Die vertikale Ausrichtung funktioniert beim Flexbox-Layout in der Tat nicht. Verwenden Sie align-items: baseline. Um mehr über Flexbox zu erfahren, lesen Sie diese Anleitung
Jacob van Lingen
10

Die Verwendung von d-flexclass funktioniert gut, aber einige andere Attribute funktionieren nicht mehr wie vertical-align: middleEigenschaft.

Der beste Weg, Spalten sehr einfach zu dimensionieren, besteht darin, das widthAttribut mit Prozentsatz nur in theadZellen zu verwenden.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>
Vorabend
quelle
4
Ehrlich gesagt die einfachste und beste Lösung. Alles andere ist für mich kläglich gescheitert.
Kreatur
3
Hinweis Die Verwendung des width-Attributs für <th> wird jetzt in HTML5
StefanJM
9

Ich habe dies für die Veröffentlichung von Bootstrap 4.1.1 gemäß meinen Anforderungen gehackt, bevor ich den Beitrag von @ florian_korner gesehen habe. Sieht sehr ähnlich aus.

Wenn Sie sass verwenden, können Sie dieses Snippet am Ende Ihrer Bootstrap-Includes einfügen. Es scheint das Problem für Chrome, IE und Edge zu beheben. Scheint nichts in Firefox zu brechen.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

oder wenn Sie nur das kompilierte CSS-Dienstprogramm möchten:

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }
Frau
quelle
5

Haftungsausschluss: Diese Antwort ist möglicherweise etwas alt. Seit dem Bootstrap 4 Beta. Bootstrap hat sich seitdem geändert.

Die Tabellenspaltengrößenklasse wurde hiervon geändert

<th class="col-sm-3">3 columns wide</th>

zu

<th class="col-3">3 columns wide</th>
Abdalla Arbab
quelle
Dies scheint beim Einstellen der Spaltenbreiten nicht zu funktionieren: codeply.com/go/Utyon2XEB6
Zim
Siehe diese stackoverflow.com/questions/41794746/…
Abdalla Arbab
1
Die andere Frage hat nichts damit zu tun. Die Spaltenbreiten funktionieren bei Tabellenzellen aufgrund der BS4 alpha 6-Flexbox nicht, wie in meiner Antwort erläutert.
Zim
4

Ich kann dieses Problem mit dem folgenden Code mithilfe von Bootstrap 4 beheben:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>
Jorge Santos
quelle
1

Ab Alpha 6 können Sie die folgende Sass-Datei erstellen:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, td, th {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: 100% / $grid-columns * $i;
        }
      }
    }
  }
}
Florian Körner
quelle
Dieser Code funktioniert überhaupt nicht - ich habe versucht, ihn 1,5 Stunden lang zu debuggen, aber mein Wissen über Sass ist zu schwach, um das zu tun. Bitte poste beim nächsten Mal Arbeitsbeispiele.
Slowwie