Bootstrap表格移动响应式

Question

我有一个Bootstrap表格，我正在尝试使其更加“移动友好”。所有我尝试过的方法都看起来很糟糕。我好奇大多数人是如何使他们的表格在移动设备上看起来不错，但在计算机或平板电脑上正常打开。

我的示例表格：

    <div class="col-lg-12">
    <table id="example" class="table table-bordered table-striped table-responsive"> 
        <thead> 
            <tr> 
                <th>Pay</th> 
                <th>Print</th> 
                <th>Year</th> 
                <th>Property Id</th> 
                <th>Name/Location</th> 
                <th>Status</th> 
                <th>Amount Paid</th> 
                <th>Date Paid</th> 
                <th>Due</th> 
                <th>Pin</th> 
                <th>Box</th>
            </tr> 
        </thead> 
        <tbody> 
            <tr>
                 <th scope="row">1</th> 
                    <td>Table cell</td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td>
           </tr> 
           <tr> 
                <th scope="row">2</th> 
                    <td>Table cell</td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td>
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
           </tr> 
           <tr> 
                <th scope="row">3</th> 
                    <td>Table cell</td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td>
           </tr> 
        </tbody> 
    </table> 
</div>

我尝试使用table-responsive作为类名。同时使用datatables和响应式函数...

$(document).ready(function() {
          $('#example').DataTable( {
              responsive: true,
          } );
      } );

它们中没有一个甚至添加滚动条来使用户更容易使用。我只是好奇其他人正在做什么，也许将行折叠在手机下面，还是怎样？对此的任何帮助将不胜感激！

- David Brierton

---

你应该给表格添加table-responsive类，这样它才能响应式地显示。可以参考这个链接：http://v4-alpha.getbootstrap.com/content/tables/#responsive-tables - Satya

请查看Colvis按钮，以实现Datatable的响应性。在这里，您可以隐藏/显示列。 - Bhushan Kawadkar

这是你之前已经问过的同一个问题吗？ - Carol Skelly

Answer 1

解决方案1：通过将任何.table包装在.table-responsive中，创建响应式表格，以使它们在小设备（小于768像素）上水平滚动。在大于768像素的任何设备上查看时，这些表格没有任何区别。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="table-responsive"> 
  <table class="table table-bordered"> 
    <thead> 
      <tr>
          <th>#</th>
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
       </tr> 
    </thead> 
    <tbody> 
          <tr> 
            <th scope="row">1</th> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
          </tr> 
          <tr> 
            <th scope="row">2</th> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
          </tr> 
          <tr> 
            <th scope="row">3</th> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
          </tr> 
        </tbody> 
       </table> 
     </div>
</div>

JS FIDDLE https://jsfiddle.net/klakshman318/tszegun6/

解决方案2：

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

JS FIDDLE https://jsfiddle.net/klakshman318/5u3a2snh/2/

：JS FIDDLE 是一个在线代码编辑器，用于在网页上创建、展示和分享HTML、CSS和JavaScript代码。链接中提供了一个例子，可以使用它来学习和测试相关的技术知识。

- Lakshman Kambam

---

你好！ - Lakshman Kambam

我添加了 <div class="col-lg-12">，它仍然正常工作..! https://jsfiddle.net/klakshman318/tszegun6/1/ - Lakshman Kambam

你是想说两行代码像这样吗？https://jsfiddle.net/klakshman318/5u3a2snh/2/ - Lakshman Kambam

是的，确切地说，Bootstrap正在干扰表格类！ - Lakshman Kambam

你在解决方案2中的CSS非常特定，最好有一个通用的解决方案。 - João Pimentel Ferreira

Answer 2

也许尝试使用弹性盒子（flex-box）来制作表格？

<div class="table">
    <div class="col">COL</div>
    <div class="col">COL</div>
    <div class="col">COL</div>
    <div class="col">COL</div>
</div>

.table {
      display: flex;
    }

    .table .col {
      width: 25%;
    }

    @media screen and (max-width: 786px) {
      .table {
        flex-wrap: wrap;
      }
      .table .col {
        width: 50%;
      }
    }

实时JsFiddle - https://jsfiddle.net/grinmax_/avav3dLs/

- grinmax

---

@DavidBrierton 或许这个链接可以帮到你 https://jsfiddle.net/grinmax_/d9o1bbny/ - grinmax