<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>acole@lockman.com</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>adah.hodkiewicz@koelpin.org</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>adams.santino@satterfield.info</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>adeline19@kihn.net</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>agustin.runolfsson@mckenzie.com</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>albertha22@daugherty.com</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>alden.witting@oconnell.com</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>alec33@koch.com</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>alexandria72@fay.net</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>alexandria91@kilback.com</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>alexzander82@feest.com</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>aliyah.hermann@nicolas.biz</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>alyson.simonis@brakus.com</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>ambrose.gleichner@murphy.com</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>amya50@rohan.com</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>anastasia.casper@stracke.net</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>angelita.stracke@veum.org</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>angelo.tillman@orn.com</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>anthony.hills@harvey.org</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>antoinette05@dickens.net</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>aortiz@feest.com</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>araceli21@torphy.net</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>arlene55@kirlin.biz</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>arlie.willms@walsh.com</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>aschinner@hansen.org</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>asia06@kulas.com</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>bahringer.anne@schroeder.com</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>balistreri.alayna@kassulke.biz</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>barrows.bryana@harvey.info</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>barrows.tia@von.biz</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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.