First, setting bootstrap, you can use Bootstrap CDN Links
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Second, setup The HTML
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="table-responsive costum-table-dark">
<table class="table">
<thead>
<tr>
<th width="2%">
No
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Username
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Larry
</td>
<td>
the Bird
</td>
<td>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Larry
</td>
<td>
the Bird
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Then, setup The CSS
.costum-table-dark .table th {
padding: 15px 10px !important;
background-color: #212121;
color: #EC7149;
border-top: 0 !important;
border-bottom: 2px solid #505050 !important;
}
.costum-table-dark .table tr:hover {
background-color: #3A3A3A;
}
.costum-table-dark .table {
background: #434242;
color: #FFF;
}
.costum-table-dark {
border: 0;
}
.costum-table-dark .table> tbody> tr> td, .costum-table-dark .table> tbody> tr> th, .costum-table-dark .table> tfoot> tr> td, .costum-table-dark .table> tfoot> tr> th, .costum-table-dark .table> thead> tr> td, .costum-table-dark .table> thead> tr> th {
border-top: 1px solid #505050;
text-align: left;
}
Subscribe to our Newsletter
Wisnu ST
Yo! I'm Wisnu ST.
I'm surfers search engine. I'm blogger. I'm cat lovers. Im everywhere.
I'm based in Tangerang, Hire me!
No comments :
Post a Comment