Question

我有一个假桌。我利用边界间隔财产在它们之间创造空间。但是,这在第一囚室之前和最后一间囚室之后也会产生间隔。

我只想在这两栏之间创造空间。

传真:

<div class="table">
    <div class="cell"></div>
    <div class="cell"></div>
</div>

CSS:

.table {
    display: table;
    width: 100%;
    border-spacing: 11px 0;
    border: 1px solid #222;
}

.cell {
    display: table-cell;
    width: 50%;
    height: 20px;
    border: 1px solid #999;
    background: #ccc;
}

JSFiddle: http://jsfiddle.net/ACH2Q/

Answer 1

你可以利用边界间隔财产增加所有桌子的间隔。然后利用边际和边际权将外部边界间隔从母体移走。

.container {
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
}

.grid {
    margin-left: -20px; /* remove outer border spacing */
    margin-right: -20px; /* remove outer border spacing */
}

.row {
    display: table;
    table-layout: fixed; /* keep equal cell widths */
    width: 100%; /* need width otherwise cells aren t equal and they self collapse */
    border-spacing: 20px 0; /* best way to space cells but has outer padding */
}

.col {
    display: table-cell;
    vertical-align: top;
}

唯一的不利之处是,你需要额外宽松的干.,因为桌子需要100%的宽度,而边值则需要打赢。

<div class="container">
    <div class="grid">
        <div class="row">
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
        </div>
    </div>
</div>

Answer 2

如果看,请看一下:/ Border-spacing统一适用,在table-cell 上添加“幅度”等字样,则不予考虑。

因此,似乎没有采用<代码>divs with display: table来解决你的问题,但使用“航天员”< rel=“nofollow”的。

但是,如果你使用“real”表格,那么你就可以使用我所认为相当可以接受的解决办法。见 jsFiddle。

标记(我增加一栏):

<table>
    <tr>
        <td></td>
        <td></td>
        <td class="last"></td>
    </tr>         
</table>

想法是使<代码>tdsdiplay:inline-block使其再次适应边际关系。然后,你适用了CSS甄选规则td + td,其中选择了所有<代码>td,但第一个选择了。对这些要素适用<条码>条形码,以获得你的“内部间隔”。最后,必须<代码>float:right 最后一栏,加上右表边界。

table {
    width: 100%;
    border: 5px solid #222;
    border-collapse: separate;
}

td + td {
    margin-left: 8%;
}

td.last {
    float: right;
}

td {
    display: inline-block;
    width: 27%;
    height: 20px;
    border: 1px solid #999;
    background: #ccc;
}

Answer 3

仅添加负数的<代码>margin-left和margin-right,以与你的横向(第一个数值)相匹配 边界-spacing。和......

.table {
    display: table;
    width: 100%;
    border: 1px solid #222;
    border-spacing: 11px 0;
    /* values to add  */
    margin-left: -11px;
    margin-right: -11px;
}

Answer 4

使用inner-table and negtive margin,然后用cs-calc(旧 width + 2 * Border-width)方法重新计算宽度。

在我的案件中,边界为2px;

.inner-table {
  display: inline-table;
  border-spacing: 2px 0;
  margin: 0 -2px;
  width: calc(100% + 4px);
}

友情链接