1

我需要能够在表格单元格元素之间留出空间，但它也会在表格的两侧增加空间。如何去除侧面的空间？这是小提琴。<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; 
}
4

2 回答 2

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%;
}
于 2013-03-20T03:24:47.297 回答
0

根据您的具体要求，您可以使用border-widthand达到预期的效果: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/

于 2013-03-20T00:22:05.427 回答