Описание
Есть HTML
таблица с четырьмя столбцами.
Cтолбцы в таблице разделяют ширину между собой поровну.
То есть каждый из четырех столбцов забирает себе по 25%
из 100%
ширины таблицы.
Столбцы 2 и 3 я сделал фиксированными, назначив им ширину 50рх
.
Остались столбцы 1 и 4, которые делят между собой оставшееся пространство.
HTML
<table class="table border-bottom" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<b>Менеджер таблиц</b>
</td>
<td class="table-cell-small">
<i class="fas fa-fire push"></i>
</td>
<td class="table-cell-small">
<i class="fas fa-bell push "></i>
</td>
<td>
<div class="head-menu-accaunt"><!--блок любой ширины-->
</div>
</td>
</tr>
</tbody>
</table>
CSS
.table-cell-small {/* ширина ячейки таблицы 50px */
text-align: center;
width: 50px;
}
Требование
Мне нужно, чтобы столбец 4 брал минимум пространства, а все остальное забирал столбец 1. Тут у меня появляются два вопроса:
- Как этого добиться?
- Можно ли сделать то, что я хочу на чистом
CSS
?