763 lines
24 KiB
HTML
Executable File
763 lines
24 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.BASIC">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">Refers to data arranged in rows and columns. A spreadsheet, for example, is a table. In relational database management systems, all information is stored in the form of tables. <small class="block">Webopedia - Online Tech Dictionary for IT Professionals</small></span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: BASIC TABLE -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Basic <span class="text-bold">Table</span></h5>
|
|
<p>
|
|
For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
|
|
</p>
|
|
<table class="table table-hover" id="sample-table-1">
|
|
<thead>
|
|
<tr>
|
|
<th class="center">#</th>
|
|
<th>Browser</th>
|
|
<th class="hidden-xs">Creator</th>
|
|
<th>Software license</th>
|
|
<th class="hidden-xs">Current layout engine</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="center">1</td>
|
|
<td class="hidden-xs">Google Chrome</td>
|
|
<td>Google</td>
|
|
<td>
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
Terms of Service
|
|
</a></td>
|
|
<td class="hidden-xs">Blink</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown is-open="status.isopen">
|
|
<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center">2</td>
|
|
<td>Internet Explorer</td>
|
|
<td class="hidden-xs">Microsoft, Spyglass</td>
|
|
<td>
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
Proprietary
|
|
</a></td>
|
|
<td class="hidden-xs">Trident</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center">3</td>
|
|
<td>Mozilla Firefox</td>
|
|
<td class="hidden-xs">Mozilla Foundation</td>
|
|
<td>
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
MPR
|
|
</a></td>
|
|
<td class="hidden-xs">Gecko</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center">4</td>
|
|
<td>Safari</td>
|
|
<td class="hidden-xs">Apple Inc.</td>
|
|
<td>
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
Proprietary
|
|
</a></td>
|
|
<td class="hidden-xs">WebKit</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center">5</td>
|
|
<td>Opera</td>
|
|
<td class="hidden-xs">Opera Software</td>
|
|
<td>
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
Proprietary
|
|
</a></td>
|
|
<td class="hidden-xs">Presto</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-o btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: BASIC TABLE -->
|
|
<!-- start: STRIPED ROWS -->
|
|
<div class="container-fluid container-fullw">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Striped <span class="text-bold">rows</span></h5>
|
|
<p>
|
|
Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.
|
|
</p>
|
|
<table class="table table-striped table-hover" id="sample-table-2">
|
|
<thead>
|
|
<tr>
|
|
<th class="center">Photo</th>
|
|
<th>Full Name</th>
|
|
<th class="hidden-xs">Role</th>
|
|
<th class="hidden-xs">Email</th>
|
|
<th class="hidden-xs">Phone</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="center"><img src="assets/images/avatar-1.jpg" class="img-rounded" alt="image"/></td>
|
|
<td>Peter Clark</td>
|
|
<td class="hidden-xs">UI Designer</td>
|
|
<td class="hidden-xs">
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
peter@example.com
|
|
</a></td>
|
|
<td class="hidden-xs">(641)-734-4763</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center"><img src="assets/images/avatar-2.jpg" class="img-rounded" alt="image"/></td>
|
|
<td>Nicole Bell</td>
|
|
<td class="hidden-xs">Content Designer</td>
|
|
<td class="hidden-xs">
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
nicole@example.com
|
|
</a></td>
|
|
<td class="hidden-xs">(741)-034-4573</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center"><img src="assets/images/avatar-3.jpg" class="img-rounded" alt="image"/></td>
|
|
<td>Steven Thompson</td>
|
|
<td class="hidden-xs">Visual Designer</td>
|
|
<td class="hidden-xs">
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
steven@example.com
|
|
</a></td>
|
|
<td class="hidden-xs">(471)-543-4073</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center"><img src="assets/images/avatar-4.jpg" class="img-rounded" alt="image"/></td>
|
|
<td>Ella Patterson</td>
|
|
<td class="hidden-xs">Web Editor</td>
|
|
<td class="hidden-xs">
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
ella@example.com
|
|
</a></td>
|
|
<td class="hidden-xs">(799)-994-9999</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="center"><img src="assets/images/avatar-5.jpg" class="img-rounded" alt="image"/></td>
|
|
<td>Kenneth Ross</td>
|
|
<td class="hidden-xs">Senior Designer</td>
|
|
<td class="hidden-xs">
|
|
<a href="#" rel="nofollow" target="_blank">
|
|
kenneth@example.com
|
|
</a></td>
|
|
<td class="hidden-xs">(111)-114-1173</td>
|
|
<td class="center">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<a href="#" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Share"><i class="fa fa-share"></i></a>
|
|
<a href="#" class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Remove"><i class="fa fa-times fa fa-white"></i></a>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a href="#">
|
|
Edit
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
Remove
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: STRIPED ROWS -->
|
|
<!-- start: CONDENSED TABLE -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5 class="over-title margin-bottom-15">Condensed <span class="text-bold">table</span></h5>
|
|
<p>
|
|
Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.
|
|
</p>
|
|
<table class="table table-condensed table-hover" id="sample-table-3">
|
|
<thead>
|
|
<tr>
|
|
<th class="hidden-xs">Clicks</th>
|
|
<th><i class="fa fa-time"></i> Update </th>
|
|
<th class="hidden-xs">Status</th>
|
|
<th class="hidden-xs"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
alpha.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 13</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
beta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Jen 15</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
gamma.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Mar 09</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
delta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 10</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
epsilon.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 18</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
zeta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 13</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
eta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Jen 15</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
theta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Mar 09</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
iota.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 10</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
kappa.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 18</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5 class="over-title margin-bottom-15">Bordered <span class="text-bold">table</span></h5>
|
|
<p>
|
|
Add <code>.table-bordered</code> for borders on all sides of the table and cells.
|
|
</p>
|
|
<table class="table table-bordered table-hover" id="sample-table-4">
|
|
<thead>
|
|
<tr>
|
|
<th>Domain</th>
|
|
<th class="hidden-xs">Clicks</th>
|
|
<th><i class="fa fa-time"></i> Update </th>
|
|
<th class="hidden-xs">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
alpha.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 13</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
beta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Jen 15</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
gamma.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Mar 09</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
delta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 10</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
epsilon.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 18</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
zeta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 13</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-warning">Expiring</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
eta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Jen 15</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
theta.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Mar 09</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-danger">Expired</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
iota.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 10</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-inverse">Flagged</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#">
|
|
kappa.com
|
|
</a></td>
|
|
<td class="hidden-xs">3,330</td>
|
|
<td>Feb 18</td>
|
|
<td class="hidden-xs"><span class="label label-sm label-success">Active</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: CONDENSED TABLE -->
|
|
<!-- start: CONTEXTUAL CLASSES -->
|
|
<div class="container-fluid container-fullw">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Contextual <span class="text-bold">classes</span></h5>
|
|
<p>
|
|
Use contextual classes to color table rows or individual cells.
|
|
</p>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="active">
|
|
<th scope="row">1</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="success">
|
|
<th scope="row">3</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="info">
|
|
<th scope="row">5</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">6</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="warning">
|
|
<th scope="row">7</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">8</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="danger">
|
|
<th scope="row">9</th>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: CONTEXTUAL CLASSES --> |