General 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 | Service Effect | Location | Direction | Acknowledg User | Date & Time Of Acknowledgment | Actions |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
 Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
 Minor |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
 Warning |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
|
|
Critical |
167.254.214.42 | Port | S100 | Lorem Ipsum | 1/4/2023 | 1/4/2023 | Yes | NA | NA | Admin | 2/1/2023 |
|
Update on : DD/MM/YYY HH:MM
| Name | State | Standing Condition | Protection Role | Operational Status | Swtitching Entity | Source | Target | Protection Level | Protection Type | Central Frequency | Layer | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| TID | AID | TID | AID | TID | AID | |||||||||
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| AdeKunle | Tamilnadu | 72 | 43 | 78 | 73 | 37 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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="table-responsive">
<table class="table table-bordered">
<thead class="bordered 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> Service Effect </th>
<th> Location </th>
<th> Direction </th>
<th> Acknowledg User </th>
<th class="white-space"> Date & Time Of Acknowledgment </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/info.svg"></span> Minor</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/section-info.svg"></span> Warning</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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>
<div class="text-center">
<input class="form-check-input" type="checkbox" id="gridCheck1" checked>
</div>
</td>
<td> <span><img class="table-icon" src="assets/img/warningflag.svg"></span> Critical</td>
<td>167.254.214.42 </td>
<td> Port</td>
<td> S100</td>
<td> Lorem Ipsum</td>
<td> 1/4/2023</td>
<td> 1/4/2023</td>
<td> Yes</td>
<td> NA</td>
<td> NA</td>
<td> Admin</td>
<td> 2/1/2023</td>
<td>
<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="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 class="row">
<div class="col-lg-12">
<div>
<div>
<br>
<div class="table-icon-header">
<div class="table-header-icons flex-wrap mb-1 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>
</div>
<div class="table-header-icons flex-wrap mb-1 d-flex">
<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>
</div>
<!-- table starts here -->
<div class="table-responsive">
<table class="table table-bordered">
<thead class="bordered table-bg no-bg">
<tr class="tr_attr">
<th rowspan="2">Name </th>
<th rowspan="2">State</th>
<th rowspan="2">Standing Condition</th>
<th rowspan="2">Protection Role</th>
<th rowspan="2">Operational Status</th>
<th class="border-bottom" colspan="2">Swtitching Entity</th>
<th class="border-bottom" colspan="2">Source</th>
<th class="border-bottom" colspan="2">Target</th>
<th rowspan="2" >Protection Level</th>
<th rowspan="2" >Protection Type</th>
<th rowspan="2" >Central Frequency</th>
<th rowspan="2" >Layer</th>
</tr>
<tr>
<th>TID</th>
<th>AID</th>
<th>TID</th>
<th>AID</th>
<th>TID</th>
<th>AID</th>
</tr>
</thead>
<tbody>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="tr_attr">
<td>AdeKunle</td>
<td>Tamilnadu</td>
<td>72</td>
<td>43</td>
<td>78</td>
<td>73</td>
<td>37</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<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>
Copy
.table>:not(caption)>*>* {
font-size: 12px;
border-bottom: 2px solid #F4F4F4;
} table .badge {
border-radius: 0.125rem;
font-size: 11px;
font-weight: initial;
line-height: 1;
padding: 0.375rem 0.5625rem;
}
table .progress {
--bs-progress-height: 5px;
}
.table{
color: #363431 !important;
}
table th {
max-width: 20vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #5F5F5F !important;
}
th.white-space {
white-space: normal;
}
.table-bordered>:not(caption)>* {
border-width: inherit;
}
.table-bg {
background: #F4F4F4;
border: 2px solid #dfdfdf;
}
.table-responsive {
border-radius: 6px;
}
img.table-icon {
width: 12px;
height: 12px;
margin-top: 0px;
margin-right: 5px;
}
img.table-header-icons {
width: 20px;
height: 20px;
cursor: pointer;
margin: 9.5px;
}
.br-left {
border-left: 1.8px solid #eeeeee;
}
.table-span-date {
justify-content: end;
display: flex;
align-items: center;
font-size: 12px;
color: #363431;
margin-right: 10px;
font-weight: 500;
padding-left: 10px;
}
.fnt-size {
font-weight: 400;
font-size: 12px !important;
margin-right: 10px;
}
.table-icon-header{
width: 100%;
justify-content: space-between;
display: flex;
}
@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); }
}
.table>:not(caption)>*>* {
font-size: 12px;
border-bottom: 2px solid #F4F4F4;
}
.table-bordered>:not(caption)>*>* {
border-width: 0 1px;
}