Responsive Tabellenbehandlung in Twitter Bootstrap

84

Wenn die Breite einer Tabelle die Breite des Bereichs überschreitet, wie auf dieser Seite: http://jsfiddle.net/rcHdC/

Sie werden sehen, dass der Inhalt der Tabelle außerhalb von liegt span .

Was wäre die beste Methode, um diesen Fall zu lösen?

html twitter-bootstrap css Ryan
quelle
Was möchten Sie passieren?
Cimmanon

Antworten:

152

Bootstrap 3 verfügt jetzt über sofort einsatzbereite Responsive-Tabellen. Hurra! :) :)

Sie können dies hier überprüfen: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Fügen Sie eine <div class="table-responsive">Umgebung um Ihren Tisch und Sie sollten bereit sein zu gehen:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Damit es auf allen Layouts funktioniert, können Sie Folgendes tun:

.table-responsive
{
    overflow-x: auto;
}
Leniel Maccaferri
quelle
7
Es gilt jedoch nur für kleine Geräte (unter 768px): S Quelle: getbootstrap.com/css/#tables-responsive
VSP
1
Um dies für Layouts aller Größen zu aktivieren, können Sie die Antwortstile einfach aus dem 768-Block in der Datei basic_and_overrides.css.scss ablegen. So etwas wie `` `.table-responsive {width: 100%; Überlauf-y: versteckt; Überlauf-x: scrollen; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: berühren; } `` `
Genkilabs
3
@ ase69s überprüfe meine aktualisierte Antwort. Gerade jetzt brauchte ich es auf einem Tisch mit vielen Spalten. Das Hinzufügen overflow-x: autoeiner benutzerdefinierten CSSDatei reicht für größere Anzeigelayouts aus.
Leniel Maccaferri
Sie können den Rand aus Gründen der Konsistenz auch in diese Stildefinition einfügen:border: 1px solid #dddddd;
ptim
2
Möglicherweise möchten Sie auch hinzufügen, .table-responsive td, .table-responsive th { white-space:nowrap; }um sicherzustellen, dass die Zellen nicht automatisch verkleinert werden, und Zeilenumbrüche hinzufügen.
Rybo111
18

Es gibt viele verschiedene Dinge, die Sie tun können, wenn Sie mit reaktionsfähigen Tabellen arbeiten.

Ich persönlich mag diesen Ansatz von Chris Coyier:

Hier finden Sie viele andere Alternativen:

Wenn Sie Bootstrap nutzen und schnell etwas erhalten können, können Sie einfach die Klassennamen ".hidden-phone" und ".hidden-tablet" verwenden, um einige Zeilen auszublenden. Dieser Ansatz ist jedoch in vielen Fällen möglicherweise der beste. Weitere Informationen (siehe "Responsive Utility-Klassen"):

Luis Evrythng
quelle
5
+1 für den Coyer Link. Ich habe das in der Vergangenheit sehr effektiv genutzt.
Fetchez la Vache
Ja, Chris Coyers Lösung ist sehr ordentlich. Viel schöner als die von Bootstrap oder Zurbfoundation (sie fügen einfach horizontale Schriftrolle hinzu).
Adrien Be
Ab Januar 2016 sind die reaktionsschnellen Inhalte von Coyier und anderen 5 bis 6 Jahre alt, bevor alle mit der Verwendung von Twitter Bootstrap begonnen haben.
Andrew Koper
1

Wenn Sie Bootstrap 3 und weniger verwenden, können Sie die Antworttabellen auf alle Auflösungen anwenden, indem Sie die Datei aktualisieren:

tables.less

oder diesen Teil überschreiben:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Mit:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Beachten Sie, wie ich den Wert für die erste Zeile @ screen-XX geändert habe.

Ich weiß, dass es vielleicht nicht so gut klingt, alle Tabellen ansprechbar zu machen, aber ich fand es äußerst nützlich, dies für LG auf großen Tabellen (viele Spalten) zu aktivieren.

Hoffe es hilft jemandem.

Mauricio
quelle