Responsive Table
Dynamic Update:
Update on : DD/MM/YYY HH:MM
|
|
Alarm Severity | NE ID | AID Type | AID | Alarm Description | EMS Date Time | NE Date Time | Date & Time Of Acknowledgment | Actions |
|---|---|---|---|---|---|---|---|---|---|
|
|
 Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | 2/1/2023 |
|
Copy
<div class="row">
<div class="col-lg-12">
<div>
<div>
<br>
<div class="table-header-icons flex-wrap mb-1 justify-content-md-end d-flex">
<span class="table-span-date">Dynamic Update:</span>
<span class="table-span-date mt-2">
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
<label class="form-check-label fnt-size" for="flexSwitchCheckChecked">ON</label>
</div>
</span>
<span class="br-left table-span-date">Update on : DD/MM/YYY HH:MM</span>
<span class="br-left"><img class="table-header-icons" src="assets/img/Refresh.svg"></span>
<span><img class="table-header-icons" src="assets/img/Download.svg"></span>
<div class="table-header-icons mb-1 d-flex">
<span class="br-left"><img class="table-header-icons" src="assets/img/Action-2.svg"></span>
<span><img class="table-header-icons" src="assets/img/Action-1.svg"></span>
<span><img class="table-header-icons" src="assets/img/Action-3.svg"></span>
</div>
</div>
<div class="responsive-tables">
<table class="table table-bordered">
<thead class="table-bg no-bg">
<tr>
<th>
<div class="text-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminates">
<label class="form-check-label" for="flexCheckDefault">
</label>
</div>
</th>
<th> Alarm Severity </th>
<th> NE ID </th>
<th> AID Type </th>
<th> AID </th>
<th> Alarm Description </th>
<th> EMS Date Time </th>
<th> NE Date Time </th>
<th class="white-space"> Date & Time Of Acknowledgment </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
<tr>
<td data-title="Checkbox">
<div>
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td data-title="Alarm Severity"> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td data-title="NE ID">167.254.214.42 </td>
<td data-title="AID Type"> Port</td>
<td data-title="AID"> S100</td>
<td data-title="Alarm Description"> Lorem Ipsum</td>
<td data-title="EMS Date Time"> 1/4/2023</td>
<td data-title="NE Date Time"> 1/4/2023</td>
<td data-title="Date & Time"> 2/1/2023</td>
<td data-title="Actions">
<span><img class="action-icon" src="assets/img/Action-2.svg"></span>
<span><img class="action-icon" src="assets/img/Action-1.svg"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="mt-3">
<div class="mt-3">
<div class="dataTables_length" id="example_length">
<div class="wrap">
<label>
Show
<select name="example_length" aria-controls="example" class="custom-select custom-select-sm form-control form-control-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Rows of 10
</label>
<div class="result">
<nav aria-label="row-pagination Page navigation example ">
<ul class="pagination flex-wrap ml-3">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">10</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">></span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
Copy
@media only screen and (max-width: 820px) {
.responsive-tables table,
.responsive-tables thead,
.responsive-tables tbody,
.responsive-tables th,
.responsive-tables td,
.responsive-tables tr {
display: block;
}
.no-bg {
border: none !important;
}
.responsive-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive-tables tr { border: 1px solid #ccc;
margin-bottom: 5px; }
.responsive-tables td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
.responsive-tables td:before {
position: absolute;
top: 6px;
left: 6px;
padding-right: 10px;
white-space: nowrap;
text-align:left;
}
.responsive-tables td:before { content: attr(data-title); }
}