響應表中Twitter的引導

Question

處理當一個表格的寬度超過跨度的寬度，這樣的頁面：http://jsfiddle.net/rcHdC/

你會看到表的內容是span之外。

會是什麼，以迎合這種情況下，最好的方法是什麼？

Answer 1

可用的一個選項是fooTable。在響應網站的偉大工程，並允許您設置多個斷點... fooTable Link

Answer 2

有很多不同的東西與響應表打交道時，你可以做。

我個人很喜歡這種方法由克里斯Coyier：

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

您可以在這裏找到許多其他的替代品：

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

如果你可以利用引導並迅速得到的東西，你可以簡單地使用類名「.hidden手機」和「.hidden片劑」隱藏某些行，但這種方法可能是最好的在許多情況下。更多信息（請參閱 「響應實用工具類」）：

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

Answer 3

Bootstrap 3現在有響應表開箱。萬歲！ :)

您可以點擊此處查看：https://getbootstrap.com/docs/3.3/css/#tables-responsive

添加<div class="table-responsive">圍繞你的表，你應該是好去：

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

爲了讓你能做到這一切的佈局工作：

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

Answer 4

如果您正在使用引導3以上，你可以通過updatingthe文件應用的響應表中的所有決議案：

tables.less 

或覆蓋該部分：

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

有了：

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

注意我是如何改變的第一行@屏幕-XX值。

我知道讓所有表響應聽起來不是那麼好，但我發現它非常有用的這個中啓動的LG大表（大量列）。

希望它可以幫助別人。