Eu tenho uma tabela "classificável" onde o cabeçalho da coluna atualmente classificada exibe um ícone:
O ícone de classificação deve ser exibido no final do texto (ou seja, apoiamos LTR / RTL). Atualmente estou usando display:flex. No entanto, se a largura da tabela diminuir e o texto do cabeçalho da coluna começar a quebrar, eu corro para estados ambíguos em que não está claro qual coluna está classificada:
Em vez disso, gostaria de atender aos seguintes requisitos:
- O ícone sempre deve estar "firmemente" alinhado com o "final" da linha de texto mais longa (mesmo que a célula / botão de agrupamento seja mais amplo).
- O ícone também deve estar alinhado com a última linha do texto.
- O ícone nunca deve quebrar em uma linha própria.
- O botão deve estar presente e deve abranger toda a largura da célula. (O estilo interno e a marcação podem mudar conforme necessário.)
- CSS e HTML somente se possível.
- Ele não pode confiar nas larguras conhecidas / definidas da coluna ou no texto do cabeçalho.
Por exemplo:
Estive a experimentar com um monte de diferentes combinações de display: inline/inline-block/flex/grid, position, ::before/::after, e até mesmo float(!), Mas não pode obter o comportamento desejado. Aqui está o meu código atual demonstrando o problema:
.table {
border-collapse: collapse;
width: 100%;
}
.thead {
border-bottom: 3px solid #d0d3d3;
}
.thead .tr {
vertical-align: bottom;
}
.button {
padding: 1rem;
text-align: start;
font-family: Arial, "noto sans", sans-serif;
font-size: 0.875rem;
border: 0;
background-color: transparent;
width: 100%;
display: flex;
align-items: flex-end;
font-weight: bold;
line-height: 1.4;
}
.sort {
width: 1.25rem;
height: 1.25rem;
}<table class="table">
<thead class="thead">
<tr class="tr">
<th class="th">
<button class="button">
Age
<span class="sort"></span>
</button>
</th>
<th class="th">
<button class="button">
Favorite Food
<span class="sort"></span>
</button>
</th>
<th class="th" aria-sort="ascending">
<button class="button">
Favorite Color
<span class="sort">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>
</th>
<th class="th">
<button class="button">
Likes Neil Diamond?
<span class="sort"></span>
</button>
</th>
</tr>
</thead>
</table>Alguma idéia de como realizar essa interface do usuário? Provavelmente isso tem pouco a ver com as coisas da mesa ou do botão. Realmente preciso Thing Aalinhar a parte inferior / extremidade "firmemente" Thing B(de uma largura flexível e que possa ter texto Thing Aem quebra automática ), mas não possa quebrar em uma linha própria.
Eu tentei mexer com os flexvalores, mas qualquer combinação faz com que o texto seja quebrado prematuramente ou não em breve.
