add flex direction row into table tr row doesn't work-CodePudding

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

CodePudding user response：

Just set td padding to 0

td {
  padding:0;
}