html - Responsive table: move cell to new line if table too small -

I am in a situation where I need to use table Strong>>, but I also want to be responsive .

For some point, under max-width: 500px , I enter my third & lt; Td> In the second line with the element 100% width and the other 50% width .

I know that with display: block with and I can put them under one another, something I will eventually do. But I need this step in between.

  table {height: 400px; Width: 100%; } Table tr td: nth-child (1) {background-color: red; } Table tr td: nth-child (2) {background color: green; } Table tr td: nth-child (3) {background-color: blue; } @ Media screen and (max-width: 500 pixels) {table tr td: nth-child (3) {background-color: pink; Clean both; Display area; Width: 100%; } Table tr td: nth-child (1), table tr td: nth-child (2) {display: block; Width: 50%; }}  

  & lt; Table & gt; & Lt; TR & gt; & Lt; TD & gt; 1 & lt; / TD & gt; & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; 3 & lt; / TD & gt; & Lt; / TR & gt; I have different variaties like  display   inline-block . Is this at all possible? And preferably without JS? Inline-block works if you deal with white space around cell, then two 50 %- Method element fit: 
 
  table {... border-spacing: collapse; } Td {padding: 0; }  
 
   
 
 Note that I have removed some unnecessary styles from your third cell.