Question

我需要能够在table-cell元素之间留出空间，但它也会在表格的两侧增加空间。如何去除侧面的空间？这是fiddle。 <table>标签也可用于此，但问题仍然存在

<div class="wrapper">
    <div class="table">
        <div class="cell">
        </div>
        <div class="cell">
        </div>
        <div class="cell">
        </div>
    </div>
    <div class="something-else">
        some other elements, table sides should align with this
    </div>
</div>

.wrapper {
    border: 1px solid green;
    padding: 5px;
}
.table {
    display: table;
    border-spacing: 15px 0;
    width: 100%;
}
.cell {
    display: table-cell;
    height: 50px;
    border: 1px solid blue;
}
.something-else {
    border: 1px solid red;
    margin-top: 10px; 
}

Answer 1

这可能就是你想要的。因为你已经将所有内容都包装成了一个表，所以我使用了多个表的想法并在第2行周围创建了一个表来实现它

http://jsfiddle.net/GGnrM/

HTML

<div class="wrapper">
    <div class="table">
        <div class="cell">
        </div>
        <div class="cell">
        </div>
        <div class="cell">
        </div>
    </div>
    <div class="table2">
        <div class="something-else">
            some other elements, table sides should align with this
        </div>
    </div>
</div>

CSS

.wrapper {
    border: 1px solid green;
    padding: 10px 5px;
}
.table {
    display: table;
    border-spacing: 5px 0;
    width: 100%;
}
.cell {
    display: table-cell;
    height: 50px;
    border: 1px solid blue;
}
.table2 {
    display: table;
    margin-top:5px;
    border-spacing: 5px 0;
    width: 100%;
}

.something-else {
    display: table-cell;
    border: 1px solid red;
    padding:1%;
}

Answer 2

根据您的具体要求，您可以通过border-width和:first-child获得所需的效果：

.table {
    display: table;
    /* border-spacing: 15px 0;  -- Removed this */
    table-layout: fixed;  /* Added this (not required, but evened-out the column widths) */
    width: 100%;
}
.cell {
    display: table-cell;
    height: 50px;
    border: 1px solid blue;
    border-width: 1px 1px 1px 15px;   /* Added this */
}
/* Added this */
.cell:first-child {
    border-width: 1px; /* Resets 15px border to 1px for first 'cell'  */
}

小提琴：http://jsfiddle.net/aLa6G/6/

内部只有边框间距

2 个答案: