Ho una tabella "ordinabile" in cui l'intestazione della colonna attualmente ordinata visualizza un'icona:
L'icona di ordinamento deve essere visualizzata alla fine del testo (ovvero, stiamo supportando LTR / RTL). Attualmente sto usando display:flex. Tuttavia, se la larghezza della tabella si riduce e il testo dell'intestazione della colonna inizia a scorrere, corro in stati ambigui in cui non è chiaro quale colonna sia ordinata:
Vorrei invece soddisfare i seguenti requisiti:
- L'icona è sempre allineata "strettamente" con la "fine" della riga di testo più lunga (anche se la cella / il pulsante di avvolgimento sono più larghi).
- L'icona dovrebbe anche essere allineata in basso con l'ultima riga di testo.
- L'icona non dovrebbe mai avvolgersi su una linea a sé stante.
- Il pulsante deve essere presente e deve estendersi per l'intera larghezza della cella. (Lo stile e il markup interni possono cambiare in base alle esigenze.)
- CSS e HTML solo se possibile.
- Non può fare affidamento su larghezze di colonna note / impostate o sul testo dell'intestazione.
Per esempio:
Ho avuto modo di sperimentare con un mazzo di diverse combinazioni di display: inline/inline-block/flex/grid, position, ::before/::aftere persino float(!), Ma non riesco a ottenere il comportamento desiderato. Ecco il mio codice attuale che dimostra il 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>Qualche idea su come realizzare questa UI? Questo probabilmente ha poco a che fare con la roba da tavolo o pulsante. Ho davvero bisogno che la parte Thing Ainferiore / fine "strettamente" sia allineata a Thing B(di una larghezza flessibile e che possa avere il testo a capo ) ma Thing Anon riesca ad andare a capo su una linea a sé stante.
Ho provato a fare confusione con i flexvalori, ma qualsiasi combinazione rende il testo prematuramente prematuro o non abbastanza presto.
