1

table-cell 要素の間にスペースを空ける必要がありますが、テーブルの側面にもスペースが追加されます。側面のスペースを削除するにはどうすればよいですか？これがフィドルです。<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-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/

于 2013-03-20T00:22:05.427 に答える