将 flex 方向行添加到表 tr 行中不起作用

Question

I add flex to table > tr .

Then, I set flex-direction to row .

 table { width: 100%; } tr { display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; width:100%; } td:nth-child(1) { flex: 0 0 20%; background-color: #ddd } td:nth-child(2) { flex: 0 0 60%; background-color: #ddd } td:nth-child(3) { flex: 0 0 10%; background-color: #eee } td:nth-child(4) { flex: 0 0 10%; background-color: #eee }

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

But in output, I couldn't see table> tr > td in 100% tr row like this:

-----------------------------------------------
|     1     |          2          |  3  |  4  |
-----------------------------------------------

Demo HERE

Answer 1

Just set td padding to 0

td {
  padding:0;
}