CODEWITHSUNDEEP
phpjqueryhtmlcss
ALFIAN ANANDA PUTRA
ALFIAN ANANDA PUTRA

Reputation: 25

How to create horizontal scroll in html table?

<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 :)

Upvotes: 0

Views: 10205

Answers (2)

David Devan
David Devan

Reputation: 56

Create responsive tables by adding .table-responsive to any .table to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

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>

Upvotes: 2

cocosnake
cocosnake

Reputation: 141

The easyest way is probably to put the table in a div, and add the scroll to that div.

Try it here : https://jsfiddle.net/26kdouaw/

or use this sample:

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

Upvotes: 1

Related Questions