0

Есть пример таблички: введите сюда описание изображения

Нужно чтобы было так: введите сюда описание изображения

Т.е. чтобы у ячеек был отступ от краев таблицы, как это сделать? Пробовал паддингами, но они не работают на ячейку, а только на её содержимое.

5
  • 1
    Не вижу чтобы таблицы чем-то отличались кроме значений. Не предоставлен код с проблемой. За 4 месяца можно было освоиться и понять что тут нет телепатов. Отступы задаются через padding или margin. Из вопроса не понятно, усерединить текст или добавить отсупы слева. От каких краёв, только слева или со всех, неизвестно
    – Doofy
    22 июл 2016 в 7:46
  • @Doofy какой вам код нужен? по-моему я задал конкретный вопрос и привел пример для того чтобы было понятно как должно быть, причем тут код, который у меня? на что он влияет в данном случае?
    – Денис
    22 июл 2016 в 7:49
  • Код самой таблицы и стилей, чтобы можно было воспроизвести пример. Может там обычный cellpadding нужен
    – Doofy
    22 июл 2016 в 7:50
  • @Doofy я всё-таки рассмотрел, там на рядах, которые выделены светлым фоном, слева и справа небольшие отступы есть) правда, глаза сломать можно...
    – lexxl
    22 июл 2016 в 7:54
  • @Денис без вашего кода сложно что-то сказать. потому могу лишь предложить пару вариантов: , если отступы не работают, светлый фон нечетным блокам задавать градиентом с прозрачностью нужного размера по краям, либо экспериментировать с border, box-shadow ...
    – lexxl
    22 июл 2016 в 7:58

1 ответ 1

1

Можно попробовать "накостылить" с дополнительными ячейками.

table {
  width: 250px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  border-collapse: collapse;
}

td {
  border: 2px solid blue;
  margin: 10px;
  background-color: white;
  padding: 10px;
}

.brdL,
.brdR {
  width: 5px;
  border-top: none;
  border-bottom: none;
  padding: 0;
}

.trTop td,
.trBot td{
  height: 5px;
}

.trTop .brdL,
.trTop .brdR {
  border-top: 2px solid blue;
}

.trBot .brdL,
.trBot .brdR {
  border-bottom: 2px solid blue;
}

.brdLR {
  border-left: none;
  border-right: none;
  padding: 0;
}

.brdL {
  border-right: none;
}

.brdR {
  border-left: none;
}
<table>
  <tr class="trTop">
    <td class="brdL"></td>
    <td colspan="4" class="brdLR"></td>
    <td class="brdR"></td>
  </tr>
  <tr>
    <td class="brdL"></td>
    <td colspan="2">12</td>
    <td colspan="2">24</td>
    <td class="brdR"></td>
  </tr>
  <tr>
    <td class="brdL"></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td class="brdR"></td>
  </tr>
  <tr class="trBot">
    <td class="brdL"></td>
    <td colspan="4" class="brdLR"></td>
    <td class="brdR"></td>
  </tr>
</table>

Ваш ответ

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

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