title: Is it possible to make child rows in HTML table by CSS?
body: <p>I have HTML tables with numerous columns, and for a good horizontal fit, its width goes far beyond the browser visible width. Reducing the size of columns will also make the table unreadable. One solution that came into my mind is to build child-rows to break long rows (both in <code>thead</code> or <code>tbody</code>). For example</p>
  
  <pre><code>Parent thead row
  &lt;tr&gt;
  a Child row: &lt;th&gt;Col1&lt;/th&gt;&lt;td&gt;Col2&lt;/th&gt;&lt;td&gt;Col3&lt;/th&gt;&lt;td&gt;Col4&lt;/th&gt;&lt;td&gt;Col5&lt;/th&gt;
  next Child row: &lt;th&gt;Col6&lt;/th&gt;&lt;td&gt;Col7&lt;/th&gt;&lt;td&gt;Col8&lt;/th&gt;&lt;td&gt;Col9&lt;/th&gt;&lt;td&gt;Col10&lt;/th&gt;
  &lt;/tr&gt;
  End of Parent thead row
  
  Parent tbody row1
  &lt;tr&gt;
  a Child row: &lt;td&gt;Content1&lt;/td&gt;&lt;td&gt;Content2&lt;/th&gt;&lt;td&gt;Content3&lt;/td&gt;&lt;td&gt;Content4&lt;/td&gt;&lt;td&gt;Content5&lt;/td&gt;
  next Child row: &lt;td&gt;Content6&lt;/td&gt;&lt;td&gt;Content7&lt;/td&gt;&lt;td&gt;Content8&lt;/td&gt;&lt;td&gt;Content9&lt;/td&gt;&lt;td&gt;Content10&lt;/td&gt;
  &lt;/tr&gt;
  End of Parent tbody row
  
  Parent tbody row2
  .
  .
  .
  </code></pre>
  
  <p>Is it possible?</p>
  
  <p>Or is there any other way to spread columns vertically without jamming the cell width?</p>