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

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

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

    <!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>
css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

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

▲ 0

Рекомендация: забыть про <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>