Responsieve tabelafhandeling in Twitter Bootstrap

Als de breedte van een tabel groter is dan de spanwijdte, zoals deze pagina: http://jsfiddle.net/rcHdC/

U zult zien dat de inhoud van de tabel buiten het spanvalt.

Wat zou de beste methode zijn om in deze zaak te voorzien?

Antwoord 1, autoriteit 100%

Bootstrap 3heeft nu responsieve tabellen uit de doos. Hoera! 🙂

Je kunt het hier controleren: https://getbootstrap.com/docs/3.3 /css/#tables-responsive

Voeg een <div class="table-responsive">toe rondom uw tafel en u bent klaar om te gaan:

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

Om het op alle lay-outs te laten werken, kun je dit doen:

.table-responsive
{
    overflow-x: auto;
}

Antwoord 2, autoriteit 14%

Eén optie die beschikbaar is, is footTable. Werkt prima op een responsieve website en stelt u in staat meerdere breekpunten in te stellen… fooTable Link

Antwoord 3, autoriteit 12%

Er zijn veel verschillende dingen die u kunt doen als u met responsieve tabellen werkt.

Persoonlijk vind ik deze benadering van Chris Coyier goed:

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

Je kunt hier veel andere alternatieven vinden:

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html #tafels

Als je Bootstrap kunt gebruiken en snel iets kunt krijgen, kun je gewoon de klassenamen “.hidden-phone” en “.hidden-tablet” gebruiken om enkele rijen te verbergen, maar deze benadering is in veel gevallen misschien de beste. Meer info (zie “Responsieve hulpprogrammaklassen”):

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

Antwoord 4

Als u Bootstrap 3 en Less gebruikt, kunt u de responsieve tabellen toepassen op alle resoluties door het bestand bij te werken:

tables.less

of dit deel overschrijven:

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

Met:

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

Merk op hoe ik de waarde van @screen-XX op de eerste regel heb gewijzigd.

Ik weet dat het misschien niet zo goed klinkt om alle tabellen responsief te maken, maar ik vond het buitengewoon handig om dit aan te zetten tot LG op grote tafels (veel kolommen).

Ik hoop dat het iemand helpt.