itsm-pc-handle/assets/views/table_responsive.html

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