Я пытаюсь работать в течение нескольких месяцев, и Google не помог мне. Я пытаюсь иметь пробел между тегами <td> и <th> в таблице, но когда я это делаю, он делает интервал снаружи. Поэтому таблица не является встроенной ни с чем другим. Таким образом, похоже, что в таблице есть отступы.
Я не могу найти решение.
Здесь приведен пример проблемы
Имела ту же проблему, свойство 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).
Я нашел способ сделать это с отрицательными полями и улучшил ответ Стивена, поскольку он позволяет сделать таблицу занятой на 100%, даже если у нее недостаточно контента. Решение состоит в том, чтобы сделать таблицу шириной 100% и использовать отрицательный запас для содержащего элемента:
#container {
margin: 0 -10px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
td, th {
background-color: #ccf;
padding: 5px;
}
Я оптимизировал решение с прозрачной рамкой, чтобы у него больше не было нарезанных внутренних границ.
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
Подобно тому, что сказал Стивен Вачон, отрицательный запас может быть вашим лучшим выбором.
В качестве альтернативы вы можете использовать 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% недостаточно широко).
Используйте отрицательные поля и контейнер с положительным отступом.
#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/
Вот простое и чистое решение.
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;
}
table {
border-collapse: inherit;
border-spacing: 10px;
width: calc(100% + 20px);
margin-left: -10px;
}
используйте margin-left: -10px; для удаления левой прокладки, но справа будет 20px padding. Теперь для его обновления используйте width: calc(100% + 20px);