CSS-таблица с интервалом между границами внутри

Question

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

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

Here пример выпуска

Answer 1

была такая же проблема, расстояние границы собственности добавлял пространство вокруг стола, а также и к моему знанию, там WASN ’ т в любом случае, чтобы ограничить его только ‘ внутри ’, так что я использовал прозрачные границы вместо:

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; 
} 

Выбирает ТД элементы первой строки (при условии, что верхняя часть таблицы начинается с тр элемента, изменить соответствующим образом для й).

Answer 2

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

#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%, иначе это будет 20px слишком узким.

Подробнее: svachon.com/blog/inside-only-css-table-border-spacing/

Answer 3

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

В качестве альтернативы вы можете использовать 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 4

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

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

See it as a jsFiddle

Answer 5

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

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 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/