Отсуп от бордера таблицы до tbody

@Тыр-тыр · Регистрация: 29.08.2014

Студворк — интернет-сервис помощи студентам

Товарищи, а не подскажете как сделать оступ от содержимого до границы таблицы?
Нельзя использовать никаких обёрток типа второго table или div-а, только одна таблица должна быть.
Вот как на этой картинке:

CSS
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
.cases-table {
    -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    margin-bottom: 29px;
}
.cases-table th {
    text-align: left;
    padding: 6px 0 6px 9px;
    font-weight: 300;
    border-bottom: 1px solid #dbdbdb;
    color: #797979;
    vertical-align: top;
    line-height: 1.6;
    background: #ffffff;
    border-spacing: 0;
}
.cases-table td {
    padding: 6px 0 6px 0;
    vertical-align: top;
    border-bottom: 1px solid #dbdbdb;
    line-height: 1.6;
    color: #000000;
    background: #ffffff;
    border-spacing: 0;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table class="cases-table">
    <tbody>
        <tr>
            <th>aaa</th>
            <td>aaa</td>
        </tr>
        <tr>
            <th>aaa</th>
            <td>aaa</td>
        </tr>
        <tr>
            <th>aaa</th>
            <td>aaa</td>
        </tr>
    </tbody>
</table>

@Вовчек · 15.08.2015, 16:39

Не понял задачу, у Вас на картинке две таблицы? Что Вы называете содержимым - текст?
Или Вы желаете сделать чтоб по краям был белый отступ, а внутри рамка со строками?

@Тыр-тыр · 15.08.2015, 17:19 **[ТС]**

Первая таблица - оригинал.
Вторая - как нужно (нарисовал в Фотшопе).
Содержимое - то что внутри тега table.

@Fedor92 · 15.08.2015, 17:29

Тыр-тыр, пример...

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Table</title>
    <style>
table{padding:20px}
.cases-table {
    -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    margin-bottom: 29px;
}
.cases-table th {
    text-align: left;
    padding: 6px 0 6px 9px;
    font-weight: 300;
    border-bottom: 1px solid #dbdbdb;
    color: #797979;
    vertical-align: top;
    line-height: 1.6;
    background: #ffffff;
    border-spacing: 0;
}
.cases-table td {
    padding: 6px 0 6px 0;
    vertical-align: top;
    border-bottom: 1px solid #dbdbdb;
    line-height: 1.6;
    color: #000000;
    background: #ffffff;
    border-spacing: 0;
}
    </style>
</head>
<body>

@Вовчек · 15.08.2015, 21:03

так по вашему коду видно, что отступы уже есть, только между td тегами тоже есть отступ, не нужный.
вот сверстал кусочек, поглядите http://codepen.io/vovcheck/pen/NqVKaO
для полного счастья осталось Вам дописать в атрибут таблицы

HTML5
1
cellspacing="0"

а, точнее по коду Fedor92,

@Тыр-тыр · 15.08.2015, 22:12 **[ТС]**

Спасибо, товарищи! Но не получается у меня на сайте это сделать.
На http://codepen.io/ получается, а у меня на сайте не получается.
Я так-же делал - добавлял padding в table. Даже так - padding: 20px!important;
Блин, не пойму в чём дело

@SF · 15.08.2015, 22:13

Тыр-тыр, добавьте в .cases-table padding

CSS
1
2
3
.cases-table {
    padding: 20px;
}

@Тыр-тыр · 16.08.2015, 00:01 **[ТС]**

SF, именно так и делаю, но не работает в рамках сайта (дефолтный css от Backdrop CMS).
Буду разбираться, что-то там какой-то конфликт случился как мне кажется.

@Вовчек · 16.08.2015, 09:05

Сообщение от Тыр-тыр

но не работает в рамках сайт

киньте ссылку, есть подозрение, что Вы от нас что-то скрываете и где-то зарыт

CSS
1
{border-collapse:collapse}

.

@Тыр-тыр · 16.08.2015, 10:24 **[ТС]**

Вовчек, ну ты молодец! В натуре.
Пламенно награждаю тебя званием - Герой Умственного Труда.
Добавил в класс border-collapse: initial; и всё заработало.

CSS
1
2
3
4
5
6
7
8
9
.cases-table {
    -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    margin-bottom: 29px;
    border: none;
    padding: 20px;
    border-collapse: initial;
}

@Вовчек · 16.08.2015, 11:44

Сообщение от Тыр-тыр

border-collapse: initial

не знаю как это заработало и работает ли это в других браузерах, но у border-collapse лучше поставить separate в Вашем случае. Вот прочитайте про него и его возможные значения http://htmlbook.ru/css/border-collapse

@Тыр-тыр · 16.08.2015, 21:22 **[ТС]**

Да, не работает в IE8 если initial.
А поставил separate и всё ок.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

Отсуп от бордера таблицы до tbody

Решение

Решение

Решение

@Вовчек 33 / 33 / 28 Регистрация: 04.04.2011 Сообщений: 333
	15.08.2015, 16:39
	Не понял задачу, у Вас на картинке две таблицы? Что Вы называете содержимым - текст? Или Вы желаете сделать чтоб по краям был белый отступ, а внутри рамка со строками? 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	15.08.2015, 17:19 [ТС]
	Первая таблица - оригинал. Вторая - как нужно (нарисовал в Фотшопе). Содержимое - то что внутри тега table. 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	15.08.2015, 22:12 [ТС]
	Спасибо, товарищи! Но не получается у меня на сайте это сделать. На http://codepen.io/ получается, а у меня на сайте не получается. Я так-же делал - добавлял padding в table. Даже так - padding: 20px!important; Блин, не пойму в чём дело 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	16.08.2015, 00:01 [ТС]
	SF, именно так и делаю, но не работает в рамках сайта (дефолтный css от Backdrop CMS). Буду разбираться, что-то там какой-то конфликт случился как мне кажется. 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	16.08.2015, 21:22 [ТС]
	Да, не работает в IE8 если initial. А поставил separate и всё ок. 0