Интервал между границами таблицы CSS только внутри

Question

Я пытался решить это месяцами, и Google не помог мне. Я пытаюсь получить интервал между тегами <td> и <th> в таблице, но когда я это делаю, он делает интервал снаружи. Поэтому таблица не соответствует чему-либо еще. Похоже, что в таблице есть некоторые отступы.

Не могу найти решение.

Здесь - пример проблемы

Answer 1

У меня была та же проблема, свойство border spacing добавляло пространство вокруг таблицы, и, насколько мне известно, не было возможности ограничить его только "внутренностью", поэтому вместо этого я использовал прозрачные границы:

table td {
   border-left: 1em solid transparent;
   border-top: 1em solid transparent;
}

Устанавливает «интервал границы» как обычно, за исключением того, что в верхней и левой части таблицы есть «нежелательный» интервал.

table td:first-child {
   border-left: 0;
}

Выбирает первый столбец.

table tr:first-child td {
   border-top: 0;
}

Выбирает элементы td первой строки (при условии, что верх таблицы начинается с элемента tr, соответственно измените th) .

Answer 2

Я нашел способ сделать это с отрицательными полями и улучшил ответ Стивена в том, что он позволяет заставить таблицу занять 100%, даже если в ней недостаточно содержимого.Решение состоит в том, чтобы сделать ширину таблицы 100% и использовать отрицательное поле для содержащего элемента:

#container {
    margin: 0 -10px;
}
table {
    border-collapse: separate;
    border-spacing: 10px;
}
td, th {
    background-color: #ccf;
    padding: 5px;
}

Просмотреть его как jsFiddle

Answer 3

Я оптимизировал решение с прозрачной рамкой, чтобы у него больше не было косых внутренних границ.

1) пусть таблица заполнится горизонтально и свернет границы:

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

2) Установите все границы ячеек таблицы на ширину 0, чтобы фон не рисовался ниже границы.

td {
  border: 0px solid transparent;
  background-clip: padding-box;
}

3) Установить внутреннее пространство с прозрачной рамкой, но не с первой строкой и столбцом.

tr > td + td {
  border-left-width: 10px;
}

tr + tr > td {
  border-top-width: 10px;
}

здесь jsbin

Answer 4

Подобно тому, что сказал Стивен Вачон, лучшим вариантом может быть отрицательная маржа.

В качестве альтернативы, вы можете использовать calc() для решения проблемы.

CSS:

/* border-collapse and border-spacing are css equivalents to <table cellspacing="5"> */

.boxmp {
    width:100%;
    border-collapse:separate;
    border-spacing:5px 0;
}

/* border-spacing includes the left of the first cell and the right of the last cell
    negative margin the left/right and add those negative margins to the width
    ios6 requires -webkit-
    android browser doesn't support calc()
    100.57% is the widest that I could get without a horizontal scrollbar at 1920px wide */

.boxdual {
    margin:0 -5px;
    width:100.57%;
    width:-webkit-calc(100% + 10px);
    width:calc(100% + 10px);
}

Просто добавьте все поля, которые вы снимаете, или ширина будет слишком узкой (100% недостаточно).

Answer 5

Используйте отрицательные поля и контейнер с положительным отступом.

#container {
    box-sizing: border-box; /* avoids exceeding 100% width */
    margin: 0 auto;
    max-width: 1024px;
    padding: 0 10px;    /* fits table overflow */
    width: 100%;
}

table {
    border-collapse: separate;
    border-spacing: 10px;
    margin: 0 -10px;    /* ejects outer border-spacing */
    min-width: 100%;    /* in case content is too short */
}

td {
    width: 25%;     /* keeps it even */
}

Просто убедитесь, что у вас достаточно содержимого, чтобы растянуть таблицу до 100% ширины, иначе она будет слишком узкой на 20 пикселей.

Дополнительная информация: svachon.com / blog / inside-only-css-table-border-spacing /

Answer 6

Вот крутой взлом, чтобы сделать это

table {
    border-collapse: inherit;
    border-spacing: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
}

используйте margin-left: -10px; для удаления левого отступа, но справа будет отступ в 20 пикселей. Теперь для обновления используйте width: calc(100% + 20px);

Answer 7

Вот простое и понятное решение.

HTML

<div class="column-container">
  <div class="column-children-wrapper">
    <div class="column">One</div>
    <div class="column">Two</div>
    <div class="column">Three</div>
    <div class="column">Four</div>
  </div>
</div>

CSS

.column-container {
  display: table;
  overflow: hidden;
}

.column-children-wrapper {
  border-spacing: 10px 0;
  margin-left: -10px;
  margin-right: -10px;
  background-color: blue;
}

.column {
  display: table-cell;
  background-color: red;
}

https://jsfiddle.net/twttao/986t968c/