使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>