Twitter Bootstrap'te duyarlı tablo işleme

Bir tablonun genişliği açıklığın genişliğini aştığında, bu sayfa gibi: http://jsfiddle.net/rcHdC/

Tablonun içeriğinin span.

Bu vakayı karşılamak için en iyi yöntem ne olabilir?

Bootstrap 3 artık kullanıma hazır Duyarlı tablolara sahip. Yaşasın! :)

Buradan kontrol edebilirsiniz: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Masanızı <div class="table-responsive">çevreleyen bir alan ekleyin ve gitmekte fayda var:

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

Tüm düzenlerde çalışmasını sağlamak için bunu yapabilirsiniz:

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

Kullanılabilen bir seçenek fooTable'dır. Duyarlı bir web sitesinde harika çalışır ve birden çok kesme noktası belirlemenize olanak tanır ... fooTable Link

Duyarlı tablolarla uğraşırken yapabileceğiniz birçok farklı şey vardır.

Ben şahsen Chris Coyier'in bu yaklaşımını beğendim:

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

Diğer birçok alternatifi burada bulabilirsiniz:

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

Bootstrap'tan yararlanıp hızlı bir şekilde bir şey elde edebiliyorsanız, bazı satırları gizlemek için ".hidden-phone" ve ".hidden-tablet" sınıf adlarını kullanabilirsiniz, ancak bu yaklaşım çoğu durumda en iyisi olabilir. Daha fazla bilgi (bkz. "Duyarlı yardımcı program sınıfları"):

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

Bootstrap 3 ve Less kullanıyorsanız, dosyayı güncelleyerek duyarlı tabloları tüm çözünürlüklere uygulayabilirsiniz:

tables.less

veya bu bölümün üzerine yazarak:

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

İle:

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

İlk satır @ screen-XX değerini nasıl değiştirdiğime dikkat edin.

Tüm tabloları uyumlu hale getirmenin kulağa pek iyi gelmeyebileceğini biliyorum, ancak bunun LG'ye büyük tablolarda (çok sayıda sütun) etkinleştirilmesini son derece yararlı buldum.

Umarım birine yardımcı olur.