Как зафиксировать контейнер для строк в одном положении?

Рейтинг: 0Ответов: 1Опубликовано: 03.07.2023

У меня есть контейнер item, в котором на одной строке расположены по порядку название, дата и статус, заданные с помощью

.title {
  display: flex;
  justify-content: space-between;
}

Ниже расположено описание. Соответственно, таких контейнеров может располагаться много. Но если статус у них будет разный (в моем случае "In Progress" и "Done" => ширина блока меняется) и отсюда строка даты у каждой колонки едет Мне нужно сделать так, чтобы дата была фиксированной и ровной, вне зависимости от статусавведите сюда описание изображения

Можно задать для статуса flex-basis, но он опять-таки будет фиксированным. Насколько я понимаю, это плохая практика для flex-basis задавать px https://codepen.io/fiorgf/pen/QWJggzM

css html flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
table {border: 1px solid black; border-collapse: collapse;}
td:nth-child(n+3) {width: 200px;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Название</th>
<th>Дата</th>
<th>Статус</th>
</tr>
<tr>
<td>Name 1</td>
<td>07.07.2023</td>
<td>In Progress</td>
</tr>
<tr>
<td>Name 2</td>
<td>07.07.2023</td>
<td>Done</td>
</tr>
</table>
</body>
</html>

Вот так это можно реализовать