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

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

21

Eine verfügbare Option ist fooTable. Funktioniert hervorragend auf einer Responsive-Website und ermöglicht das Festlegen mehrerer Haltepunkte ... fooTable Link

— Gfw
quelle

FooTable ist jetzt so konzipiert, dass es sofort mit Twitter Bootstrap funktioniert.

— Shasi Kanth

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:

http://css-tricks.com/responsive-data-tables/

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"):

http://twitter.github.io/bootstrap/scaffolding.html#responsive

— 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