@govbr-ds/core
Version:
Padrão Digital de Governo
65 lines (64 loc) • 2.21 kB
HTML
<div class="br-table" title="Tabela irregular 1">
<div class="table-header">
<div class="top-bar">
<div class="table-title">Tabela irregular 1</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-87926" 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-87926" 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><colgroup span="3"></colgroup>
<thead>
<tr>
<th class="border-bottom" scope="col">Poster name</th>
<th class="border-bottom border-left" scope="col">Color</th>
<th class="border-bottom border-left" colspan="3" scope="colgroup">Sizes available</th>
</tr>
</thead>
<tbody>
<tr>
<th class="border-right" rowspan="3" scope="rowgroup">Zodiac</th>
<td>Full color</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>Black and white</td>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>Sepia</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
</tr>
</tbody>
<tbody>
<tr>
<th class="border-right" rowspan="2" scope="rowgroup">Angels</th>
<td>Black and white</td>
<td>A1</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>Sepia</td>
<td>A2</td>
<td>A3</td>
<td>A5</td>
</tr>
</tbody>
</table>
</div>