carbon-components/src/components/data-table/data-table--simple.html

Carbon Components is a component library for IBM Cloud

<div class="bx--responsive-table-container" data-responsive-table>
  <table class="bx--responsive-table bx--responsive-table--static-size" data-table>
    <thead class="bx--table-head">
      <tr class="bx--table-row">
        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
          <span>First Name</span>
          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
            <path d="M10 0L5 5 0 0z"></path>
          </svg>
        </th>
        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
          <span>Last Name</span>
          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
            <path d="M10 0L5 5 0 0z"></path>
          </svg>
        </th>
        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
          <span>House</span>
          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
            <path d="M10 0L5 5 0 0z"></path>
          </svg>
        </th>
      </tr>
    </thead>
    <tbody class="bx--table-body">
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Harry</td>
        <td>Potter</td>
        <td>Gryffindor</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Hermoine</td>
        <td>Granger</td>
        <td>Gryffindor</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Ron</td>
        <td>Weasley</td>
        <td>Gryffindor</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Draco</td>
        <td>Malfoy</td>
        <td>Slytherin</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Blaise</td>
        <td>Zabini</td>
        <td>Slytherin</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Cedric</td>
        <td>Diggory</td>
        <td>Hufflepuff</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Luna</td>
        <td>Lovegood</td>
        <td>Ravenclaw</td>
      </tr>
      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
        <td>Cho</td>
        <td>Chang</td>
        <td>Ravenclaw</td>
      </tr>
    </tbody>
  </table>
</div>