使1噸不等，4 TD的行爲，如：2 TR在每個1倍的TD和1 TR 2 TD的，只有用CSS

Question

有了這個HTML：

<table> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</table> 

我得到這樣的輸出：

1 2 3 4 

但我想要的是：

1 
2 3 
4 

我怎樣才能做到這一點不改變HTML，只能用CSS？

如果我這樣做：

td { display: table-row; } 
td:nth-child(2), td:nth-child(3) { display: table-cell; } 

它不工作。但是，如果我去掉「顯示：表芯」我只需要進行2和3 TD到1 TR

例子：https://jsfiddle.net/1h3eyLqk/

Answer 1

你可以在這裏使用Flexbox，使第一和最後一個單元格採取100％的寬度。

tr { 
 
    display: inline-flex; 
 
    flex-wrap: wrap; 
 
} 
 
td { 
 
    flex: 1; 
 
    text-align: center; 
 
} 
 
td:first-child, 
 
td:last-child { 
 
    flex: 0 0 100%; 
 
}

<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>