<table> mit festem <thead> und scrollbarem <tbody>
Ich habe hier im Internet Fragen und Artikel durchgesehen, aber noch keine Lösung gefunden, die meinen Anforderungen entspricht. Also jetzt, 2017, gibt es eine elegante Möglichkeit, ein <table> zu haben, das:
- in html + css geschrieben sein (keine js)
- haben einen festen Header (nicht scrollbar; nicht klebrig)
- haben scrollbare
<tbody>(die Bildlaufleiste ist möglicherweise immer sichtbar) - header und Body würden die Größenänderung korrekt behandeln und nicht die Ausrichtung der
<thead>-Spalten und der<tbody>-Spalten beeinflussen - würde keine verschachtelten Tabellen oder separaten Tabellen für Header verwenden
Die untenstehende Lösung erfüllt alle 5 Anforderungen:
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table; /* to take the same width as tr */
width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}
tbody {
display: block; /* to enable vertical scrolling */
max-height: 200px; /* e.g. */
overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}
th, td {
width: 33.33%; /* to enable "Word-break: break-all" */
padding: 5px;
Word-break: break-all; /* 4. */
}
tr {
display: table; /* display purpose; th's border */
width: 100%;
box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}<table>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1111111111111111111111111</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data2222222222222222222222222</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data3333333333333333333333333</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>Chrome, FF, Rand
Die einfachste Lösung ist, th { position: sticky; top: 0; } zu verwenden.
/* JUST COMMON TABLE STYLES... */
table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }
.tableFixHead {
overflow: auto;
height: 100px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>IE11
Um den IE11 ( 2,5% Marktanteil Stand 10/2018) unauffällig zu unterstützen, ein wenig jaggy, aber zumindest THs sind an der Spitze - Sie könnten dieses JavaScript hinzufügen:
function isIE() {
return navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > -1
}
if (isIE()) {
// Fix table head
function tableFixHead(ths) {
var sT = this.scrollTop;
[].forEach.call(ths, function(th) {
th.style.transform = "translateY(" + sT + "px)";
});
}
[].forEach.call(document.querySelectorAll(".tableFixHead"), function(el) {
var ths = el.querySelectorAll("thead th");
el.addEventListener("scroll", tableFixHead.bind(el, ths));
});
}
was (da IE die sticky-Position ignoriert) transform translateY verwendet, um die TH -Elemente zu positionieren.
PS: Die obige JS (ohne if-Anweisung) funktioniert auch für alle anderen immergrünen Browser recht gut - falls position: sticky; nicht Ihren Anforderungen entspricht ...
Wie wäre es damit?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
max-width:980px;
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 18px);
}
tbody {
height:300px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Header 1 </th>
<th scope="col">Header 2 </th>
<th scope="col">Header 3 </th>
<th scope="col">Header 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1 </td>
<td>Footer 2 </td>
<td>Footer 3 </td>
<td>Footer 4 </td>
</tr>
</tfoot>
</table>
</body>
</html>
Ich habe unten eine Geige angelegt
.table-sticky>thead>tr>th,
.table-sticky>thead>tr>td {
background: #009688;
color: #fff;
top: 0px;
position: sticky;
}
.table-height {
height: 320px;
display: block;
overflow: scroll;
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td {
border: 1px solid #ddd;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fixed Table Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<div id="container">
<div class="table-responsive table-height">
<table class="table table-bordered table-striped table-hover table-sticky">
<thead style="background:#1e91cf;color:#fff">
<tr>
<th class="text-center" rowspan="2"> Product</th>
<th class="text-center" colspan="2"> Sellable</th>
<th class="text-center" colspan="2"> Unsellable</th>
<th class="text-center" colspan="2"> Total</th>
<th class="text-center" colspan="6">2018-July</th>
<th class="text-center" colspan="6">2018-June</th>
<th class="text-center" colspan="6">2018-May</th>
<th class="text-center" colspan="6">2018-April</th>
</tr>
<tr>
<th class="text-center" style="top: 23px;"> Units</th>
<th class="text-center" style="top: 23px;"> Amount</th>
<th class="text-center" style="top: 23px;"> Units</th>
<th class="text-center" style="top: 23px;"> Amount</th>
<th class="text-center" style="top: 23px;"> Units</th>
<th class="text-center" style="top: 23px;"> Amount</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">INFOCUS-TURBO5-GG-16GB-D</td>
<td class="text-left">1244</td>
<td class="text-left">75,12,756</td>
<td class="text-left">173</td>
<td class="text-left">10,50,827</td>
<td class="text-left">1417</td>
<td class="text-left">85,63,583</td>
<td class="text-left">11</td>
<td class="text-left">65,989</td>
<td class="text-left">3</td>
<td class="text-left">18,497</td>
<td class="text-left">14</td>
<td class="text-left">84,486</td>
<td class="text-left">112</td>
<td class="text-left">6,71,888</td>
<td class="text-left">17</td>
<td class="text-left">1,01,983</td>
<td class="text-left">129</td>
<td class="text-left">7,73,871</td>
<td class="text-left">649</td>
<td class="text-left">38,93,351</td>
<td class="text-left">85</td>
<td class="text-left">5,10,415</td>
<td class="text-left">734</td>
<td class="text-left">44,03,766</td>
<td class="text-left">472</td>
<td class="text-left">28,81,528</td>
<td class="text-left">68</td>
<td class="text-left">4,19,932</td>
<td class="text-left">540</td>
<td class="text-left">33,01,460</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-GG-32GB-D</td>
<td class="text-left">2140</td>
<td class="text-left">1,50,25,360</td>
<td class="text-left">453</td>
<td class="text-left">31,98,547</td>
<td class="text-left">2593</td>
<td class="text-left">1,82,23,907</td>
<td class="text-left">222</td>
<td class="text-left">15,53,778</td>
<td class="text-left">41</td>
<td class="text-left">2,86,959</td>
<td class="text-left">263</td>
<td class="text-left">18,40,737</td>
<td class="text-left">558</td>
<td class="text-left">39,05,442</td>
<td class="text-left">113</td>
<td class="text-left">7,90,887</td>
<td class="text-left">671</td>
<td class="text-left">46,96,329</td>
<td class="text-left">798</td>
<td class="text-left">55,85,202</td>
<td class="text-left">168</td>
<td class="text-left">11,78,332</td>
<td class="text-left">966</td>
<td class="text-left">67,63,534</td>
<td class="text-left">562</td>
<td class="text-left">39,80,938</td>
<td class="text-left">131</td>
<td class="text-left">9,42,369</td>
<td class="text-left">693</td>
<td class="text-left">49,23,307</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-MG-16GB-DAR</td>
<td class="text-left">371</td>
<td class="text-left">22,25,629</td>
<td class="text-left">45</td>
<td class="text-left">2,69,955</td>
<td class="text-left">416</td>
<td class="text-left">24,95,584</td>
<td class="text-left">39</td>
<td class="text-left">2,33,961</td>
<td class="text-left">9</td>
<td class="text-left">53,991</td>
<td class="text-left">48</td>
<td class="text-left">2,87,952</td>
<td class="text-left">294</td>
<td class="text-left">17,63,706</td>
<td class="text-left">32</td>
<td class="text-left">1,91,968</td>
<td class="text-left">326</td>
<td class="text-left">19,55,674</td>
<td class="text-left">38</td>
<td class="text-left">2,27,962</td>
<td class="text-left">4</td>
<td class="text-left">23,996</td>
<td class="text-left">42</td>
<td class="text-left">2,51,958</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-MG-32GB-D</td>
<td class="text-left">6</td>
<td class="text-left">44,994</td>
<td class="text-left">3</td>
<td class="text-left">22,497</td>
<td class="text-left">9</td>
<td class="text-left">67,491</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">3</td>
<td class="text-left">22,497</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">4</td>
<td class="text-left">29,996</td>
<td class="text-left">3</td>
<td class="text-left">22,497</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">4</td>
<td class="text-left">29,996</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-RG-32GB-D</td>
<td class="text-left">1459</td>
<td class="text-left">1,09,84,041</td>
<td class="text-left">335</td>
<td class="text-left">25,23,665</td>
<td class="text-left">1794</td>
<td class="text-left">1,35,07,706</td>
<td class="text-left">141</td>
<td class="text-left">10,57,359</td>
<td class="text-left">40</td>
<td class="text-left">2,99,960</td>
<td class="text-left">181</td>
<td class="text-left">13,57,319</td>
<td class="text-left">558</td>
<td class="text-left">41,84,442</td>
<td class="text-left">116</td>
<td class="text-left">8,69,884</td>
<td class="text-left">674</td>
<td class="text-left">50,54,326</td>
<td class="text-left">369</td>
<td class="text-left">27,67,131</td>
<td class="text-left">101</td>
<td class="text-left">7,57,399</td>
<td class="text-left">470</td>
<td class="text-left">35,24,530</td>
<td class="text-left">391</td>
<td class="text-left">29,75,109</td>
<td class="text-left">78</td>
<td class="text-left">5,96,422</td>
<td class="text-left">469</td>
<td class="text-left">35,71,531</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5PLUS-MB-32GB-D</td>
<td class="text-left">5</td>
<td class="text-left">39,995</td>
<td class="text-left">4</td>
<td class="text-left">31,996</td>
<td class="text-left">9</td>
<td class="text-left">71,991</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">5</td>
<td class="text-left">39,995</td>
<td class="text-left">4</td>
<td class="text-left">31,996</td>
<td class="text-left">9</td>
<td class="text-left">71,991</td>
</tr>
<tr>
<td class="text-left">INFOCUS-VISION3-16GB-D</td>
<td class="text-left">4005</td>
<td class="text-left">2,80,30,995</td>
<td class="text-left">618</td>
<td class="text-left">43,25,382</td>
<td class="text-left">4623</td>
<td class="text-left">3,23,56,377</td>
<td class="text-left">28</td>
<td class="text-left">1,95,972</td>
<td class="text-left">8</td>
<td class="text-left">55,992</td>
<td class="text-left">36</td>
<td class="text-left">2,51,964</td>
<td class="text-left">234</td>
<td class="text-left">16,37,766</td>
<td class="text-left">44</td>
<td class="text-left">3,07,956</td>
<td class="text-left">278</td>
<td class="text-left">19,45,722</td>
<td class="text-left">1727</td>
<td class="text-left">1,20,87,273</td>
<td class="text-left">241</td>
<td class="text-left">16,86,759</td>
<td class="text-left">1968</td>
<td class="text-left">1,37,74,032</td>
<td class="text-left">2016</td>
<td class="text-left">1,41,09,984</td>
<td class="text-left">325</td>
<td class="text-left">22,74,675</td>
<td class="text-left">2341</td>
<td class="text-left">1,63,84,659</td>
</tr>
<tr>
<td class="text-left">INFOCUS-VISION3-BL-16GB-D</td>
<td class="text-left">9344</td>
<td class="text-left">6,53,98,656</td>
<td class="text-left">1161</td>
<td class="text-left">81,25,839</td>
<td class="text-left">10505</td>
<td class="text-left">7,35,24,495</td>
<td class="text-left">301</td>
<td class="text-left">21,06,699</td>
<td class="text-left">60</td>
<td class="text-left">4,19,940</td>
<td class="text-left">361</td>
<td class="text-left">25,26,639</td>
<td class="text-left">2339</td>
<td class="text-left">1,63,70,661</td>
<td class="text-left">304</td>
<td class="text-left">21,27,696</td>
<td class="text-left">2643</td>
<td class="text-left">1,84,98,357</td>
<td class="text-left">3745</td>
<td class="text-left">2,62,11,255</td>
<td class="text-left">440</td>
<td class="text-left">30,79,560</td>
<td class="text-left">4185</td>
<td class="text-left">2,92,90,815</td>
<td class="text-left">2959</td>
<td class="text-left">2,07,10,041</td>
<td class="text-left">357</td>
<td class="text-left">24,98,643</td>
<td class="text-left">3316</td>
<td class="text-left">2,32,08,684</td>
</tr>
<tr>
<td class="text-left">INFOCUS-VISION3PRO-MNB-</td>
<td class="text-left">620</td>
<td class="text-left">68,19,380</td>
<td class="text-left">104</td>
<td class="text-left">11,43,896</td>
<td class="text-left">724</td>
<td class="text-left">79,63,276</td>
<td class="text-left">47</td>
<td class="text-left">5,16,953</td>
<td class="text-left">13</td>
<td class="text-left">1,42,987</td>
<td class="text-left">60</td>
<td class="text-left">6,59,940</td>
<td class="text-left">198</td>
<td class="text-left">21,77,802</td>
<td class="text-left">46</td>
<td class="text-left">5,05,954</td>
<td class="text-left">244</td>
<td class="text-left">26,83,756</td>
<td class="text-left">344</td>
<td class="text-left">37,83,656</td>
<td class="text-left">45</td>
<td class="text-left">4,94,955</td>
<td class="text-left">389</td>
<td class="text-left">42,78,611</td>
<td class="text-left">31</td>
<td class="text-left">3,40,969</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">31</td>
<td class="text-left">3,40,969</td>
</tr>
<tr>
<td class="text-left">MOTO-G5-FG-16GB</td>
<td class="text-left">52</td>
<td class="text-left">4,27,812</td>
<td class="text-left">28</td>
<td class="text-left">2,36,063</td>
<td class="text-left">80</td>
<td class="text-left">6,63,875</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">8,985</td>
<td class="text-left">1</td>
<td class="text-left">8,985</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">8,229</td>
<td class="text-left">1</td>
<td class="text-left">8,229</td>
<td class="text-left">14</td>
<td class="text-left">1,15,465</td>
<td class="text-left">8</td>
<td class="text-left">68,675</td>
<td class="text-left">22</td>
<td class="text-left">1,84,140</td>
<td class="text-left">38</td>
<td class="text-left">3,12,347</td>
<td class="text-left">18</td>
<td class="text-left">1,50,174</td>
<td class="text-left">56</td>
<td class="text-left">4,62,521</td>
</tr>
<tr>
<td class="text-left">MOTO-GPLUS4-BL-16GB</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>