0

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

    <!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>

3 ответа 3

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>

3
  • А почему на ютубе автор использует <table></table> ? Курс 4-х летней давности, за это время поменялись каноны? 3 фев в 11:05
  • @Андрей уже 6 лет назад я считал, что table безнадежно устарел и пользовался grid-ом
    – Great Tech
    3 фев в 11:09
  • 1
    Теперь я знаю что такое грид, спасибо большое за совет))) 8 фев в 20:04
-1

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

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.