Mam „sortowalną” tabelę, w której nagłówek aktualnie posortowanej kolumny wyświetla ikonę:
Ikona sortowania ma być wyświetlana na końcu tekstu (tzn. Obsługujemy LTR / RTL). Obecnie używam display:flex
. Jeśli jednak szerokość tabeli się zmniejszy, a tekst nagłówka kolumny zacznie się zawijać, wpadam w dwuznaczne stany, w których nie jest jasne, która kolumna jest posortowana:
Zamiast tego chciałbym spełnić następujące wymagania:
- Ikona jest zawsze „ściśle” wyrównana z „końcem” najdłuższej linii tekstu (nawet jeśli owijająca komórka / przycisk jest szersza).
- Ikona powinna być również wyrównana do dołu z ostatnim wierszem tekstu.
- Ikona nigdy nie powinna się owijać we własną linię.
- Przycisk musi być obecny i powinien obejmować całą szerokość komórki. (Jego wewnętrzna stylizacja i znaczniki mogą się zmieniać w razie potrzeby).
- CSS i HTML tylko, jeśli to w ogóle możliwe.
- Nie może polegać na znanych / ustawionych szerokościach kolumn lub tekście nagłówka.
Na przykład:
Byłem eksperymentować z wieloma różnymi kombinacjami display: inline/inline-block/flex/grid
, position
, ::before/::after
, a nawet float
(!), Ale nie można uzyskać pożądanego zachowania. Oto mój obecny kod demonstrujący problem:
.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>
Wszelkie pomysły, jak zrealizować ten interfejs? Prawdopodobnie ma to niewiele wspólnego ze stołem lub przyciskami. Naprawdę potrzebuję Thing A
„ciasno” wyrównanego do dołu / końca Thing B
(o elastycznej szerokości, który może zawijać tekst), ale Thing A
nie mogę zawijać się na własnej linii.
Próbowałem zadzierać z flex
wartościami, ale dowolna kombinacja powoduje, że tekst zawija się przedwcześnie lub nie jest wystarczająco wcześnie.