<div class="Attendees">
<div class="Attendees1">
<h4 size="4">Attendees 300</h4><button><span>Export Student Data</span>
<div radius="10"></div>
</button>
</div>
<div class="TableWrapper">
<table>
<thead>
<tr>
<th>
<div><span>Student First name</span>
<div></div>
</div>
</th>
<th>
<div><span>Last name</span>
<div></div>
</div>
</th>
<th>
<div><span>Email</span>
<div></div>
</div>
</th>
<th>
<div><span>Class date</span>
<div></div>
</div>
</th>
<th>
<div><span>Attended</span>
<div></div>
</div>
</th>
<th>
<div><span>% Mark</span>
<div></div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Henry</div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Bruen</div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:26 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#496073" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#496073" fill-rule="evenodd" d="M15.9995 9.5998l-6.3996 6.3994-1.5998-1.5998L14.3996 8l1.5999 1.5998z" clip-rule="evenodd"></path>
<path fill="#496073" fill-rule="evenodd" d="M9.6004 8l6.3995 6.3994-1.5998 1.5998-6.3996-6.3994L9.6004 8z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Phoebe</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>McKenzie</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>America</div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Green</div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:21 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#496073" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#496073" fill-rule="evenodd" d="M15.9995 9.5998l-6.3996 6.3994-1.5998-1.5998L14.3996 8l1.5999 1.5998z" clip-rule="evenodd"></path>
<path fill="#496073" fill-rule="evenodd" d="M9.6004 8l6.3995 6.3994-1.5998 1.5998-6.3996-6.3994L9.6004 8z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Felicity</div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>O'Reilly</div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:22 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#496073" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#496073" fill-rule="evenodd" d="M15.9995 9.5998l-6.3996 6.3994-1.5998-1.5998L14.3996 8l1.5999 1.5998z" clip-rule="evenodd"></path>
<path fill="#496073" fill-rule="evenodd" d="M9.6004 8l6.3995 6.3994-1.5998 1.5998-6.3996-6.3994L9.6004 8z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Mitchel</div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Turcotte</div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#496073" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#496073" fill-rule="evenodd" d="M15.9995 9.5998l-6.3996 6.3994-1.5998-1.5998L14.3996 8l1.5999 1.5998z" clip-rule="evenodd"></path>
<path fill="#496073" fill-rule="evenodd" d="M9.6004 8l6.3995 6.3994-1.5998 1.5998-6.3996-6.3994L9.6004 8z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Anahi</div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Rodriguez</div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:22 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#496073" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#496073" fill-rule="evenodd" d="M15.9995 9.5998l-6.3996 6.3994-1.5998-1.5998L14.3996 8l1.5999 1.5998z" clip-rule="evenodd"></path>
<path fill="#496073" fill-rule="evenodd" d="M9.6004 8l6.3995 6.3994-1.5998 1.5998-6.3996-6.3994L9.6004 8z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Bradley</div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div>Conn</div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:22 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#496073" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#496073" fill-rule="evenodd" d="M15.9995 9.5998l-6.3996 6.3994-1.5998-1.5998L14.3996 8l1.5999 1.5998z" clip-rule="evenodd"></path>
<path fill="#496073" fill-rule="evenodd" d="M9.6004 8l6.3995 6.3994-1.5998 1.5998-6.3996-6.3994L9.6004 8z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Oran</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Carter</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:24 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Angelita</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Kuhlman</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:21 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Unique</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Barrows</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:25 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Larue</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Will</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:21 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Jaquan</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Klocko</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Nicolas</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Stoltenberg</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:25 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Michael</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Pacocha</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Lionel</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Bayer</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:25 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Jamaal</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Luettgen</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Branson</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Shanahan</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:21 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Naomie</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Pollich</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:26 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Hulda</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Weissnat</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:26 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Marta</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Herman</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:24 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Kelly</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Satterfield</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:21 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Marie</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Waelchi</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:26 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Alisha</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Donnelly</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:22 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Guy</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Johnston</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:25 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Finn</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Welch</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:26 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Elton</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Lang</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Piper</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Heathcote</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:26 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Oda</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Kub</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:25 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Gertrude</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Blick</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:23 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
<tr>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Reggie</span></div>
</td>
<td style="font-size: 1rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0px;">
<div><span>Aufderhar</span></div>
</td>
<td>
<div>[email protected]</div>
</td>
<td>
<div> 12-May-2021, 11:25 am </div>
</td>
<td>
<div>
<div><svg fill="none" viewBox="0 0 24 24" height="24" width="24">
<path stroke="#FF4D4D" stroke-width="2" d="M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9z"></path>
<path fill="#FF4D4D" fill-rule="evenodd" d="M16.525 13.1317l-9.0502-.0002v-2.2626l9.0502.0002v2.2626z" clip-rule="evenodd"></path>
</svg></div>
</div>
</td>
<td>
<div> 0% </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>html,
body {
height: 100%;
}
.Attendees {
/* color: #23313b;
width: calc(100vw - 160px);
height: calc(100% - 120px);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
margin: 60px 80px; */
width: 100%;
height: 100%;
}
.Attendees1 {
color: #23313b;
-webkit-box-align: center;
align-items: center;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.TableWrapper {
/* color: #23313b;
background-color: #ffffff;
width: calc(100% - 1rem);
height: calc(100% - 6rem);
overflow-y: scroll; */
position: relative;
width: min-content;
max-width: 100%;
max-height: 100%;
border: solid 1px black;
overflow: auto;
}
/* thead {
color: #23313b;
border-spacing: 0;
border-collapse: separate;
display: table;
table-layout: fixed;
width: 100%;
border-top: 1px solid #dee4e9;
border-bottom: 1px solid #dee4e9;
height: 60px;
} */
table {
/* color: #23313b;
border-spacing: 0;
table-layout: fixed;
border-radius: 6px;
border-collapse: separate;
*/
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
background-color: white;
}
/* th,
td {
padding: 0.5rem;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
text-align: left;
word-break: break-all;
}
th {
background: white;
color: #23313b;
border-spacing: 0;
border-collapse: separate;
width: 13rem;
position: sticky;
top: 0;
z-index: 1;
}
th:first-child {
left: 0;
z-index: 3;
}
tbody {
border-spacing: 0;
border-collapse: separate;
color: #23313b;
overflow-y: scroll;
}
tr {
border-spacing: 0;
border-collapse: separate;
color: #23313b;
display: table;
table-layout: fixed;
width: 100%;
cursor: pointer;
}
td {
border-spacing: 0;
border-collapse: separate;
color: #23313b;
cursor: pointer;
width: 13rem;
background-color: #ffffff;
}
td:first-child {
position: sticky;
left: 0;
z-index: 1;
}
*/
th,
td {
height: 30px;
line-height: 30px;
padding: 0 10px;
border: solid black;
border-width: 0 1px 1px 0;
vertical-align: middle;
white-space: nowrap;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
th {
position: sticky;
z-index: 1;
}
th:not(.filter) {
top: 0;
background-color: lightgreen;
}
th.filter {
top: 31px;
padding: 0;
background-color: lightblue;
}
th:nth-child(-n+4) {
width: 1%;
}
th:nth-child(5) {
width: auto;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.