Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Растянуть таблицу на всю ширину без отступов (CSS)

Чтобы растянуть таблицу на всю ширину браузера и по краям не было отступов, сперва необходимо обнулить внешние и внутренние отступы тегов <body> и <html>, затем установить значение width: 100%.

Пример

Наглядный пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Растянуть таблицу на всю ширину без отступов (CSS)</title>
    <style>
        /**
         * Чтобы не было отступов, необходимо обнулить отступы
         * у тегов body и html
         */

        html,
        body {
            margin: 0;
            padding: 0;
        }

        /**
         * Ставим ширину 100%
         */

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: #ccc 1px solid;
            padding: 5px 10px;
        }
    
</style>

</head><body>

<table>
    <tr>
        <th>Колонка 1</th>
        <th>Колонка 2</th>
        <th>Колонка 3</th>
    </tr>

    <tr>
        <td>Текст первой колонки</td>
        <td>Текст второй колонки</td>
        <td>Текст третьей колонки</td>
    </tr>
</table>

</body></html>
Опубликовано: 17 сентября 2013  ·  Автор: chepro  ·  6405 просмотров

Категория

ГлавнаяВеб-дизайнCSSРастянуть таблицу на всю ширину без отступов (CSS)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

CSS, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания