The code snippet below includes a set max-width for table cells to ensure they have equal width regardless of their content. The vertical-align is set to top. However, the first cell appears longer than the second and third cells, leaving a significant gap between the 2nd-5th and 3rd-6th table cells. Is there a way to eliminate this space? I want the 5th and 6th cells to immediately follow the cells above without waiting for the 1st cell to end.
table tr td {
vertical-align:top;
max-width:90px;
background-color: #dedede;
color: black
}<table>
<tr>
<td>this is first cell. this will be quite lengthy</td>
<td>this is second cell</td>
<td>this is third cell</td>
</tr>
<tr>
<td>this is fourth cell</td>
<td>this is fifth cell</td>
<td>this is sixth cell</td>
</tr>
</table>