Межстрочный интервал таблицы CSS

Ответ 1

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

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

Это устанавливает интервал между границами & rsquo; как обычно, за исключением того, что "s & lsquo; unwanted & rsquo; расстояние в верхней и левой частях таблицы.

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

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

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

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

Ответ 2

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

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

Посмотрите как jsFiddle

Ответ 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

Ответ 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% недостаточно широко).

Ответ 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/

Ответ 6

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

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/

Ответ 7

Вот крутой взломать это

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

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