Нет разрыва между тегами span в th
У меня есть таблица со стрелками сортировки в заголовке таблицы. Каждый элемент th имеет span для текста и span для стрелок сортировки. Я хочу, чтобы текст слева span динамически переносился, а span со стрелками сортировки оставался в правом верхнем углу th.
CSS:
th {
border: 1px solid black;
}
.sort {
float: right;
}
.sort-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.sort-arrow.asc {
border-bottom: 5px solid #1F2B39;
margin-bottom: 4px;
margin-top: 3px;
}
.sort-arrow.desc {
border-top: 5px solid #1F2B39;
margin-top: 4px;
margin-bottom: 3px;
}
HTML:
<table>
<thead>
<tr>
<th>
<span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
<span class = "sort">
<div class = "sort-arrow asc"></div>
<div class = "sort-arrow desc"></div>
</span>
</th>
<th>
<span>Short</span>
<span class = "sort">
<div class = "sort-arrow asc"></div>
<div class = "sort-arrow desc"></div>
</span>
</th>
</tr>
</thead>
<tbody>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</tbody>
</table>
измените id на class , чтобы этот стиль применялся к обоим
Изменил id на класс. Это была ошибка копирования/вставки.
Ответы 3
Использование position: relative для родителя и position: absolute для детей должно работать. Затем вы можете поместить их, используя top: 0 и right: 0, и они будут помещены в верхний правый угол!
Чтобы иметь перенос текста, просто сделайте ваши контейнеры фиксированной ширины (или с процентами), текст будет переноситься, потому что это естественный способ работы.
И, как сказал @CBroe в комментарии, идентификаторы должны быть уникальными!
Спасибо за ваш ответ! Это сработало с несколькими настройками, но принятый ответ дал мне наименьшие изменения в моем коде.
Вы можете создать div внутри th и дать этому div отображение гибкости, а для элементов, которые не идут в верхнюю часть th, вы можете использовать vertical-align: top;
th,
td {
border: 1px solid black;
vertical-align: top;
text-align:left;
}
thead,
tbody {
background: yellow;
}
.row {
display: flex;
align-items: flex-start;
}
.sort-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.sort-arrow.asc {
border-bottom: 5px solid #1F2B39;
margin-bottom: 4px;
margin-top: 3px;
}
.sort-arrow.desc {
border-top: 5px solid #1F2B39;
margin-top: 4px;
margin-bottom: 3px;
}<table>
<thead>
<tr >
<th>
<div class = "row">
<span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
<span class = "sort">
<div class = "sort-arrow asc"></div>
<div class = "sort-arrow desc"></div>
</span>
</div>
</th>
<th >
<div class = "row">
<span>Short</span>
<span class = "sort">
<div class = "sort-arrow asc"></div>
<div class = "sort-arrow desc"></div>
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>Спасибо за ваш ответ! Я попробовал это, а также поставил flex на td, но теперь это больше не структура таблицы. Это просто строки без упорядоченных столбцов.
Добавил TBODY в мой вопрос.
только что отредактировал ответ, установив отображение th на flex, испортит структуру таблицы, поэтому создайте div внутри th и вместо этого установите отображение этого div на flex.
Обновлено, чтобы показать пример с использованием макета таблицы CSS Grid.
Вы можете легко использовать display: flex с justify-content: space-between. Вы также можете использовать свойство gap, как показано в примере ниже, чтобы добавить пробел между заголовком и стрелками.
table {
display: grid;
grid-template-columns: minmax(30ch, auto) 1fr;
}
th,
td {
border: 1px solid #aaa;
margin: 0 -1px -1px 0; /* hack to collapse borders */
padding: 1rem;
}
tr:last-of-type > td {
border-bottom: 2px solid #aaa;
}
thead,
tbody,
tr {
display: contents;
}
.header {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.sort-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.sort-arrow.asc {
border-bottom: 5px solid #1F2B39;
margin-bottom: 4px;
margin-top: 3px;
}
.sort-arrow.desc {
border-top: 5px solid #1F2B39;
margin-top: 4px;
margin-bottom: 3px;
}<table>
<thead>
<tr>
<th>
<div class = "header">
<span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
<span class = "sort">
<div class = "sort-arrow asc"></div>
<div class = "sort-arrow desc"></div>
</span>
</div>
</th>
<th>
<div class = "header">
<span>Short</span>
<span class = "sort">
<div class = "sort-arrow asc"></div>
<div class = "sort-arrow desc"></div>
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>Спасибо за ваш ответ! Я попробовал это, а также поставил flex на td, но теперь это больше не структура таблицы. Это просто строки без упорядоченных столбцов.
Добавил TBODY в мой вопрос.
Идентификаторы по-прежнему должны быть уникальными...