Смещение текста в таблице

Question

Как сделать с помощью css смещение текста в таблице на 20% от ширины ячейки? Заголовок таблицы оставить по центру.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        th {
            width: 180px;
            height: 120px;
        }

        td {
            padding-top: 40px;
            padding-bottom: 40px;
            padding-left: 20%;
        }
    </style>
</head>
<body>
<table border="3">
    <tr>
        <th>Порядковый номер блока</th>
        <th>Размер шрифта</th>
        <th>Семейство шрифта</th>
        <th>Тип границы блока</th>
        <th>Цвет границы блока</th>
    </tr>
    <tr>
        <td>1</td>
        <td>23px</td>
        <td>Arial, sans-serif</td>
        <td>solid</td>
        <td>black</td>
    </tr>
    <tr>
        <td>2</td>
        <td>16px</td>
        <td>Lucida Console, sans-serif</td>
        <td>dashed</td>
        <td>red</td>
    </tr>
    <tr>
        <td>3</td>
        <td>7.2px</td>
        <td>Tahoma, sans-serif</td>
        <td>thick double</td>
        <td>blue</td>
    </tr>
    <tr>
        <td>4</td>
        <td>17.4px</td>
        <td>Times New Roman, sans-serif</td>
        <td>ridge</td>
        <td>yellow</td>
    </tr>
    <tr>
        <td>5</td>
        <td>14.4px</td>
        <td>Verdana, sans-serif</td>
        <td>dotted</td>
        <td>green</td>
    </tr>
</table>
</body>
</html>

Answer 1

text-indent в CSS — это свойство, которое призвано управлять отступом в начале строки текста внутри блока. Это отступление можно применять к разным блочным элементам, и оно оказывает влияние на первую строку внутри этих блоков. Суть text-indent заключается в том, что оно определяет расстояние, на которое следует сдвинуть начало текста.

Пример синтаксиса:

selector {
    text-indent: length | percentage | initial | inherit;
}

length: Указывает конкретную длину отступа в пикселях, em, rem и так далее. percentage: Задает отступ в процентах от ширины блока. initial: Устанавливает значение свойства по умолчанию. inherit: Наследует значение от родительского элемента.

Пример использования text-indent:

p {
    text-indent: 20px; /* Отступ в 20 пикселей */
}

blockquote {
    text-indent: 2em; /* Отступ в 2em (относительно размера шрифта) */
}

div {
    text-indent: 10%; /* Отступ в 10% от ширины блока */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        th {
            width: 180px;
            height: 120px;
        }

        td {
            padding-top: 40px;
            padding-bottom: 40px;
            text-indent: 20%; // Изменение
        }
    </style>
</head>
<body>
<table border="3">
    <tr>
        <th>Порядковый номер блока</th>
        <th>Размер шрифта</th>
        <th>Семейство шрифта</th>
        <th>Тип границы блока</th>
        <th>Цвет границы блока</th>
    </tr>
    <tr>
        <td>1</td>
        <td>23px</td>
        <td>Arial, sans-serif</td>
        <td>solid</td>
        <td>black</td>
    </tr>
    <tr>
        <td>2</td>
        <td>16px</td>
        <td>Lucida Console, sans-serif</td>
        <td>dashed</td>
        <td>red</td>
    </tr>
    <tr>
        <td>3</td>
        <td>7.2px</td>
        <td>Tahoma, sans-serif</td>
        <td>thick double</td>
        <td>blue</td>
    </tr>
    <tr>
        <td>4</td>
        <td>17.4px</td>
        <td>Times New Roman, sans-serif</td>
        <td>ridge</td>
        <td>yellow</td>
    </tr>
    <tr>
        <td>5</td>
        <td>14.4px</td>
        <td>Verdana, sans-serif</td>
        <td>dotted</td>
        <td>green</td>
    </tr>
</table>
</body>
</html>

БЛОГ НА HUSL

Смещение текста в таблице

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