@govbr-ds/core/dist/components/table/examples/table-irregular-2.html

Padrão Digital de Governo

<div class="br-table" title="Tabela irregular 2">
  <div class="table-header">
    <div class="top-bar">
      <div class="table-title">Tabela irregular 2</div>
      <div class="actions-trigger text-nowrap">
        <button class="br-button circle" type="button" id="button-dropdown-density" title="Ver mais opções" data-toggle="dropdown" data-target="target01-46280" aria-label="Definir densidade da tabela" aria-haspopup="true" aria-live="polite"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
        </button>
        <div class="br-list" id="target01-46280" role="menu" aria-labelledby="button-dropdown-density" hidden="hidden">
          <button class="br-item" type="button" data-density="small" role="menuitem">Densidade alta
          </button><span class="br-divider"></span>
          <button class="br-item" type="button" data-density="medium" role="menuitem">Densidade média
          </button><span class="br-divider"></span>
          <button class="br-item" type="button" data-density="large" role="menuitem">Densidade baixa
          </button>
        </div>
      </div>
    </div>
  </div>
  <table><col>
<colgroup span="2"></colgroup>
<colgroup span="3"></colgroup>
    <thead>
      <tr>
        <th class="border-right" rowspan="2" scope="rowgroup">Name</th>
        <th class="border-right border-bottom" colspan="2" scope="colgroup">HR Information</th>
        <th class="border-bottom" colspan="3" scope="colgroup">Contact</th>
      </tr>
      <tr>
        <th class="border-right" scope="col">Position</th>
        <th class="border-right" scope="col">Salary</th>
        <th class="border-right" scope="col">Office</th>
        <th class="border-right" scope="col">Extn.</th>
        <th scope="col">E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>$320,800</td>
        <td>Edinburgh</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>$170,750</td>
        <td>Tokyo</td>
        <td>8422</td>
        <td>g.winters@datatables.net</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>$86,000</td>
        <td>San Francisco</td>
        <td>1562</td>
        <td>a.cox@datatables.net</td>
      </tr>
    </tbody>
  </table>
</div>