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>

我尝试将表响应作为一个类使用。使用数据表并使用响应函数......

$(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 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/

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

Live JsFiddle - https://jsfiddle.net/grinmax_/avav3dLs/

Bootstrap表移动响应

2 个答案: