Как сделать “резиновые” столбцы в таблице?

293

10 января 2018, 16:21

Описание

Есть 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?

Answer 1

Это легко достигается на Grid Layout.

Колонка по минимальному размеру делается auto, всё оставшееся пространство берут fr столбцы в соответствии с пропорцией, в данном случае такой столбец один.

.container { 
  display: grid; 
  grid-template-columns: 1fr 50px 50px auto; 
  grid-column-gap: 10px; 
} 
 
.item { 
  background-color: green; 
  height: 70px; 
  color: white; 
  padding: 5px; 
}

<div class="container"> 
  <div class="item">берёт остаток</div> 
  <div class="item">fix</div> 
  <div class="item">fix</div> 
  <div class="item">по минимальному</div> 
</div>

Почитать по Grid Layout можно тут - https://metanit.com/web/html5/13.1.php

Answer 2

Придайте каждому столбцу свой класс, и укажите расстояние в процентах.

.table {
width: 100%;}
.stolb4 {
width: 5%;}

тем самым всё остальное пространство заберут себе другие столбцы. Если нужно что бы сама таблица была не на всю страницу заключите её в div обозначив границы поля для div

Answer 3

Как например:

.table-cell-small {/*  ширина ячейки таблицы 50px  */ 
    text-align: center; 
    width: 50px; 
} 
 
table { 
  width: 100%; 
  table-layout: fixed; 
} 
 
.table-cell-first { 
  width: 100px; 
} 
 
.table-cell-last { 
  width: calc(100% - 200px); 
}

<table class="table border-bottom" cellpadding="0" cellspacing="0"> 
    <tbody> 
        <tr> 
            <td class="table-cell-first"> 
                <b>Менеджер таблиц</b> 
            </td> 
            <td class="table-cell-small"> 
                <i class="fas fa-fire push">icon-1</i> 
            </td> 
            <td class="table-cell-small"> 
                <i class="fas fa-bell push ">icon-2</i> 
            </td> 
            <td class="table-cell-last"> 
                <div class="head-menu-accaunt"><!--блок любой ширины--> 
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, odit, amet. Dolor labore iure voluptate laudantium blanditiis officiis doloribus minus. 
                </div> 
            </td> 
        </tr> 
    </tbody> 
</table>

Задать таблице table-layout: fixed;, чтобы ячейки в 50px были как раз 50px, а не меньше или больше.

Answer 4

Как-то так.

.table-cell-small { 
    text-align: center; 
    width: 50px; 
} 
table td { 
  padding: 5px; 
  background: #dedede; 
} 
 
.table-auto { 
  display: inline-block; 
  padding: 10px; 
}

<table class="table border-bottom" cellpadding="0" cellspacing="0" width="100%"> 
    <tbody> 
        <tr> 
            <td> 
                <b>Менеджер таблиц</b> 
            </td> 
            <td class="table-cell-small"> 
                s 
            </td> 
            <td class="table-cell-small"> 
               s 
            </td> 
            <td class="table-auto"> 
                <div class="head-menu-accaunt"> 
                  b 
                </div> 
            </td> 
        </tr> 
    </tbody> 
</table>