How to remove empty space in a table cell ?
<p>In the code below I have set <code>max-width</code> for table cells, so all of them have equal width irrespective of content they carry and <code>vertical-align</code> is set to top. But as you see first cell is quite lengthy as compared to second and third so there is huge space left between 2nd-5th and 3rd-6th table cells. Is there any way to remove that space ? I mean I want 5th and 6th cells to follow the above cells immediately and not to wait for 1st cell to end.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table tr td {
  vertical-align:top;
  max-width:90px;
  background-color: #dedede;
  color: black
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;this is first cell. this will be quite lengthy&lt;/td&gt;
    &lt;td&gt;this is second cell&lt;/td&gt;
    &lt;td&gt;this is third cell&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td&gt;this is fouth cell&lt;/td&gt;
    &lt;td&gt;this is fifth cell&lt;/td&gt;
    &lt;td&gt;this is sixth cell&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>