jquery - 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>

我试过使用表格响应作为一个类。使用数据表和使用响应函数...

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

他们都没有添加滚动条，甚至是为了让用户更轻松。我只是想知道其他人在做什么的例子，也许是为了电话而将行折叠在彼此下面？如有任何帮助，我们将不胜感激!

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/