Bootstrap 表移动响应

Question

我有一个引导表，我试图让它更“移动友好”。我尝试过的一切看起来都很可悲。我很好奇大多数人所做的真正使桌子在移动设备上看起来不错但在计算机或平板电脑上正常打开的原因。

我的示例表：

    <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 作为一个类。使用数据表并使用响应功能...

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

他们都没有添加滚动条，即使是为了让用户更容易。我只是好奇其他人正在做的事情的例子，也许是为了电话或什么而折叠彼此下面的行？对此的任何帮助将不胜感激！

Answer 1

解决方法1：用任何响应创建的表.table中.table-responsive，使他们在小型设备上水平滚动（768px下）。在宽度大于 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 小提琴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小提琴https://jsfiddle.net/klakshman318/5u3a2snh/2/