141 lines
3.7 KiB
HTML
Executable File
141 lines
3.7 KiB
HTML
Executable File
<!-- start: PAGE TITLE -->
|
|
<section id="page-title">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<h1 class="mainTitle" translate="sidebar.nav.tables.RESPONSIVE">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">Make tables scroll horizontally on small devices</span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: RESPONSIVE TABLE -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Responsive <span class="text-bold">Table</span></h5>
|
|
<p>
|
|
Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> 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.
|
|
</p>
|
|
<div class="alert alert-info">
|
|
Please try to re-size your browser window in order to see the tables in responsive mode.
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover" id="sample-table-1">
|
|
<thead>
|
|
<tr>
|
|
<th>Domain</th>
|
|
<th>Price</th>
|
|
<th>Clicks</th>
|
|
<th><i class="fa fa-time"></i> Update </th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
alpha.com
|
|
</a></td>
|
|
<td>$45</td>
|
|
<td>3,330</td>
|
|
<td>February 13</td>
|
|
<td><span class="label label-sm label-warning">Expiring</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
beta.com
|
|
</a></td>
|
|
<td>$70</td>
|
|
<td>3,330</td>
|
|
<td>January 15</td>
|
|
<td><span class="label label-sm label-success">Registered</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
gamma.com
|
|
</a></td>
|
|
<td>$25</td>
|
|
<td>3,330</td>
|
|
<td>March 09</td>
|
|
<td><span class="label label-sm label-danger">Expired</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
delta.com
|
|
</a></td>
|
|
<td>$50</td>
|
|
<td>3,330</td>
|
|
<td>February 10</td>
|
|
<td><span class="label label-sm label-inverse">Flagged</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
epsilon.com
|
|
</a></td>
|
|
<td>$35</td>
|
|
<td>3,330</td>
|
|
<td>February 18</td>
|
|
<td><span class="label label-sm label-success">Registered</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
zeta.com
|
|
</a></td>
|
|
<td>$45</td>
|
|
<td>3,330</td>
|
|
<td>February 13</td>
|
|
<td><span class="label label-sm label-warning">Expiring</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
eta.com
|
|
</a></td>
|
|
<td>$70</td>
|
|
<td>3,330</td>
|
|
<td>January 15</td>
|
|
<td><span class="label label-sm label-success">Registered</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
theta.com
|
|
</a></td>
|
|
<td>$25</td>
|
|
<td>3,330</td>
|
|
<td>March 09</td>
|
|
<td><span class="label label-sm label-danger">Expired</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
iota.com
|
|
</a></td>
|
|
<td>$50</td>
|
|
<td>3,330</td>
|
|
<td>February 10</td>
|
|
<td><span class="label label-sm label-inverse">Flagged</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
kappa.com
|
|
</a></td>
|
|
<td>$35</td>
|
|
<td>3,330</td>
|
|
<td>February 18</td>
|
|
<td><span class="label label-sm label-success">Registered</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: RESPONSIVE TABLE --> |