title: create a table with thead wider than the table itself
body: <p>I have a very basic table, made up of 3 rows and 3 columns, and i'm trying to make it look like in this picture</p>
  
  <p><a href="https://i.stack.imgur.com/31nIN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/31nIN.jpg" alt="table"></a></p>
  
  <p>(that is, the thead should be wider than the other rows). How do i achieve this effect? I tried with colspan but i can't get it right. The basic table is something like:</p>
  
  <pre><code> &lt;table&gt;
     &lt;thead&gt;
     &lt;tr&gt;
     &lt;th&gt;Extra details&lt;/th&gt;
     &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
     &lt;tr&gt;
     &lt;td&gt;A&lt;/td&gt;
     &lt;td&gt;B&lt;/td&gt;
     &lt;td&gt;C&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
     &lt;td&gt;A&lt;/td&gt;
     &lt;td&gt;B&lt;/td&gt;
     &lt;td&gt;C&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
     &lt;td&gt;A&lt;/td&gt;
     &lt;td&gt;B&lt;/td&gt;
     &lt;td&gt;C&lt;/td&gt;
     &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt; 
  </code></pre>
  
  <p>Thanks!</p>