Tengo una tabla "ordenable" donde el encabezado de la columna actualmente ordenada muestra un icono:
El icono de clasificación se mostrará al final del texto (es decir, admitimos LTR / RTL). Actualmente estoy usando display:flex. Sin embargo, si el ancho de la tabla se reduce y el texto del encabezado de la columna comienza a ajustarse, me encuentro con estados ambiguos donde no está claro qué columna está ordenada:
En cambio, me gustaría cumplir con los siguientes requisitos:
- El ícono siempre debe estar "firmemente" alineado con el "final" de la línea de texto más larga (incluso si la celda / botón de ajuste es más ancho).
- El icono también debe estar alineado con la última fila de texto.
- El icono nunca debe ajustarse a una línea propia.
- El botón debe estar presente y debe abarcar todo el ancho de la celda. (Su estilo interno y el marcado pueden cambiar según sea necesario).
- CSS y HTML solo si es posible.
- No puede basarse en anchos de columna conocidos / establecidos o texto de encabezado.
Por ejemplo:
He estado experimentando con un montón de diferentes combinaciones de display: inline/inline-block/flex/grid, position, ::before/::after, e incluso float(!) Pero no puedo conseguir el comportamiento deseado. Aquí está mi código actual que demuestra el 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>¿Alguna idea sobre cómo lograr esta interfaz de usuario? Esto probablemente tiene poco que ver con la tabla o el botón. Realmente necesito Thing Aun fondo / extremo "apretado" alineado a Thing B(de un ancho flexible y que pueda tener texto ajustado) pero Thing Ano puedo ajustarlo a una línea propia.
He intentado jugar con los flexvalores, pero cualquier combinación hace que el texto se ajuste prematuramente o no lo suficientemente pronto.
