Wednesday, March 9, 2016

Tutorial Styling Responsive Table Bootstrap (With Dark Color)

✔ Unknown Diterbitkan 11:35 PM

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>
@twitter
</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>
@twitter
</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;
}