Как задать ширину 4-ому столбцу таблицы html?

Question

Коллеги, добрый день, подскажите пожалуйста, как задать ширину не всей таблицы, а именно четвёртому столбцу? На данный момент задаётся ширина всей таблицы

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>HTML - Изучение</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <table>
            <colgroup>
                <col>
                <col>
                <col style="background-color:#97DB9A" span="2">
                <col style="width: 42px">
                </colgroup>
            <tr>
                <th>Первая колонка</th>
                <th>Вторая колонка</th>
                <th>Третья колонка</th>
                <th style="width: 42px">Четвертая колонка</th>
                <th>Пятая колонка</th>
                <th>Шестая колонка</th>

            </tr>
            <tr>
                <td>Вторая строка</td>
                <td>Вторая строка</td>
                <td>Вторая строка</td>
                <td>Вторая строка</td>
                <td>Вторая строка</td>
                <td>Вторая строка</td>
            </tr>
            <tr>
                <td>Третья строка</td>
                <td>Третья строка</td>
                <td>Третья строка</td>
                <td>Третья строка</td>
                <td>Третья строка</td>
                <td>Третья строка</td>
            </tr>
            <tr>
                <td>Четвертая строка</td>
                <td>Четвертая строка</td>
                <td>Четвертая строка</td>
                <td>Четвертая строка</td>
                <td>Четвертая строка</td>
                <td>Четвертая строка</td>
            </tr>
        </table>
    </body>
</html>

Answer 1

Вопрос решил, указав прямо в четвертом столбце style="width: **px"

Answer 2

Рекомендация: забыть про <table> и пользоваться современным конструктором - display: grid

Работа с такой таблицей будет куда более удобной, а задать ширину колонок можно более гибким образом

Например, ниже я указываю 2fr для последней колонки, 1fr для всех остальных, что делает три равные по размеру колонки, а четвертую - в 2 раза шире. Можно так же указать какие угодно другие величины, как в пикселях, так и в процентах от родительского блока / всего окна

#grid{
  display: grid;
  
  /* величины колонок */
  grid-template-columns: 1fr 1fr 1fr 2fr;
  
  /* расстояние между столбцами*/
  grid-gap:10px;
}
#grid > *{
  background:lightblue;
  padding: 10px;

}

<div id="grid">
  <div>Раз</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>

  <div>Раз</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
</div>

Answer 3

Можно ещё так :)

table colgroup col:nth-child(4), table tr:first-of-type th:nth-child(4) {
  width: 42px;
}

<table>
    <colgroup>
        <col>
        <col>
        <col style="background-color:#97DB9A" span="2">
        <col>
    </colgroup>
    <tr>
        <th>Первая колонка</th>
        <th>Вторая колонка</th>
        <th>Третья колонка</th>
        <th>Четвертая колонка</th>
        <th>Пятая колонка</th>
        <th>Шестая колонка</th>

    </tr>
    <tr>
        <td>Вторая строка</td>
        <td>Вторая строка</td>
        <td>Вторая строка</td>
        <td>Вторая строка</td>
        <td>Вторая строка</td>
        <td>Вторая строка</td>
    </tr>
    <tr>
        <td>Третья строка</td>
        <td>Третья строка</td>
        <td>Третья строка</td>
        <td>Третья строка</td>
        <td>Третья строка</td>
        <td>Третья строка</td>
    </tr>
    <tr>
        <td>Четвертая строка</td>
        <td>Четвертая строка</td>
        <td>Четвертая строка</td>
        <td>Четвертая строка</td>
        <td>Четвертая строка</td>
        <td>Четвертая строка</td>
    </tr>
</table>

БЛОГ НА HUSL

Как задать ширину 4-ому столбцу таблицы html?

Ответы (3 шт):