First, I applied flex to the table > tr.
Next, I configured the flex-direction to be 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>However, when I previewed it, the table > tr > td did not display in a 100% tr row layout as expected:
-----------------------------------------------
| 1 | 2 | 3 | 4 |
-----------------------------------------------
Check out the demo HERE