php - 如何在html表格中创建水平滚动条？

Question

<div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default panel-table">
          <div class="panel-heading">Order History
          </div>
          <div class="panel-body">
            <table id="table2" class="table table-striped table-hover table-fw-widget">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Order ID</th>
                  <th>Service</th>
                  <th>Target</th>
                  <th>Quantity</th>
                  <th>Price</th>
                  <th>Status</th>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <td ><? echo $orderData['date'] ?></td>
                    <th ><? echo $orderData['oid'] ?></th>
                    <td><? echo $orderData['service'] ?></td>
                    <td><a href="http://nullrefer.com/?<? echo $orderData['link'] ?>"><font color="red"><? echo $orderData['link'] ?>...</font></a></td>
                    <td><? echo number_format($orderData['quantity'],0,',','.') ?></td>
                    <td>Rp <? echo number_format($orderData['price'],0,',','.') ?></td>
                    <td><button class="btn btn-rounded btn-space btn-<? echo $label ?> btn-xs"><?php echo $orderData['status'] ?></button></td>
                    <td><? echo $orderData['message'] ?></td>
                </tr>
            </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

how to create horizontal scroll in html table? anyone can help?

I want the results similar to the one in this picture, where the slider is helpful :)

Answer 1

通过将 .table-responsive 添加到任何 .table 来创建响应式表格，使它们在小型设备(小于 768 像素)上水平滚动。在大于 768 像素宽的任何内容上查看时，您不会在这些表格中看到任何差异。

https://v4-alpha.getbootstrap.com/content/tables/#responsive-tables

<div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default panel-table">
          <div class="panel-heading">Order History
          </div>
          <div class="panel-body">
            <table id="table2" class="table table-responsive table-hover table-fw-widget">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Order ID</th>
                  <th>Service</th>
                  <th>Target</th>
                  <th>Quantity</th>
                  <th>Price</th>
                  <th>Status</th>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <td ><? echo $orderData['date'] ?></td>
                    <th ><? echo $orderData['oid'] ?></th>
                    <td><? echo $orderData['service'] ?></td>
                    <td><a href="http://nullrefer.com/?<? echo $orderData['link'] ?>"><font color="red"><? echo $orderData['link'] ?>...</font></a></td>
                    <td><? echo number_format($orderData['quantity'],0,',','.') ?></td>
                    <td>Rp <? echo number_format($orderData['price'],0,',','.') ?></td>
                    <td><button class="btn btn-rounded btn-space btn-<? echo $label ?> btn-xs"><?php echo $orderData['status'] ?></button></td>
                    <td><? echo $orderData['message'] ?></td>
                </tr>
            </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>