將一組CSS表單元格換成一個新行

Question

我正在試驗兩層DOM元素集的CSS屬性，使其看起來像是一張表。最頂層的元素只有一個，它包裹着它的孩子，而這又反過來形成了一個單一的類似元素列表。像這樣：

<div class="t"> 
    <div class="c">First row</div> 
    <div class="c">2</div> 
    <div class="c">3</div> 
    <div class="c">4</div> 
    <div class="c">5</div> 
    <div class="c">Second row</div> 
    <div class="c">7</div> 
    <div class="c">8</div> 
    <div class="c">9</div> 
    <div class="c">0</div> 
</div> 

我想讓這個列表形成兩行，每行包含5個元素。所以我使用的CSS是這樣的：

.t { 
    display: table; 
    width: 100%; 
} 
.c { 
    display: table-cell; 
} 
.c:nth-child(5n + 1):after { 
    content: '-'; 
    display: table-row; 
} 

這是行不通的。

有沒有辦法保持兩層嵌套，並仍然有一個列表，看起來好像它是一個表？

Answer 1

如果您可以編輯HTML，只需使結構像一個完整的表。

.t { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.r { 
 
    display: table-row; 
 
} 
 
.c { 
 
    display: table-cell; 
 
}

<div class="t"> 
 
    <div class="r"> 
 
    <div class="c">First row</div> 
 
    <div class="c">2</div> 
 
    <div class="c">3</div> 
 
    <div class="c">4</div> 
 
    <div class="c">5</div> 
 
    </div> 
 
    <div class="r"> 
 
    <div class="c">Second row</div> 
 
    <div class="c">7</div> 
 
    <div class="c">8</div> 
 
    <div class="c">9</div> 
 
    <div class="c">0</div> 
 
    </div> 
 
</div>

Answer 2

基於什麼/你如何希望他們的行爲，你可以使用float，（沒有爲這一個，雖然跨瀏覽器支持測試），但他們不會表現爲正常的table。

另一種選擇是使用flexbox（仍不會表現爲正常table雖然）

.t { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.c { 
 
    display: table-cell; 
 
    float: left; 
 
    width: 20%; 
 
}

<div class="t"> 
 
    <div class="c">First row</div> 
 
    <div class="c">2</div> 
 
    <div class="c">3</div> 
 
    <div class="c">4</div> 
 
    <div class="c">5</div> 
 
    <div class="c">Second row</div> 
 
    <div class="c">7</div> 
 
    <div class="c">8</div> 
 
    <div class="c">9</div> 
 
    <div class="c">0</div> 
 
</div>

Answer 3

實現你預期的結果，我已經使用的位置是：相對的選項，並顯示： table-cell

HTML：

<div class="t"> 
    <div class="c">First row</div> 
    <div class="c">2</div> 
    <div class="c">3</div> 
    <div class="c">4</div> 
    <div class="c">5</div> 
    <div class="c">Second row</div> 
    <div class="c">7</div> 
    <div class="c">8</div> 
    <div class="c">9</div> 
    <div class="c">0</div> 
</div> 

CSS：

.t { 
    display: table; 
    width: 100%; 
} 

.c { 
    display: table-cell; 
    padding: 1%; 
    border: 1px solid black; 
    text-align: center; 
    width: 10%; 
} 

.c:nth-child(n+6) { 
    display: table-cell; 
    position: relative; 
    left: -50%; 
    top: 60px; 
} 

Codepen- http://codepen.io/nagasai/pen/mEOjLL