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

最简单的方法可能是将表放在div中，然后将滚动添加到该div。

在此处试试：https://jsfiddle.net/26kdouaw/

或使用此样本：

<html>
<head>
    <style>
        td {
            white-space: nowrap;
        }
        .withscroll {
            width: 100px;
            overflow-x: scroll;
            white-space: nowrap;
        }
    </style>
</head>
<body>


<div class="withscroll">
    <table>
        <tr><td>Some content ...</td><td>Some content ...</td><td>Some content ...</td><td>Some content ...</td></tr>
        <tr><td>Some content ...</td><td>Some content ...</td><td>Some content ...</td><td>Some content ...</td></tr>
        <tr><td>Some content ...</td><td>Some content ...</td><td>Some content ...</td><td>Some content ...</td></tr>
    </table>
</div>

</body>
</html>

Answer 2

通过将.table-responsive添加到任何.table来创建响应式表格，以使它们在小型设备（768px以下）上水平滚动。在大于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>

如何在html表中创建水平滚动？

2 个答案: