title: Get header/caption centered above 2-column table
body: <p>I've temporarily inherited the responsibility to look after the website front end to our project as our web maintainer has just left and there isn't a replacement yet (and I'm a summer student anyway, so I'm off soon too...). I'm not very experienced with HTML/CSS/etc, and I'm having some problems getting a table formatted the way the bosses would like it. The table HTML/CSS (cut down as much as I think I can) is as follows:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;style type="text/css"&gt;
  
              /* Old CSS from web-guy before me */
    h5 { 
     font-size: 150%; 
     color: #878796;
     font-family: Arial,Helvetica,sans-serif;
    }
  
    .details-container {
     border-right : 1px;
     border-right-color:#F6F6F6;
     float:left;
    }
  
    .title-details h5 {
     text-align: center;
     margin: 0px;
     margin-bottom: 5px;
     margin-top: 5px;
    }
  
    /* From here on it is mostly my CSS */
    table.center {
     margin-left:auto;
     margin-right:auto;
    }
  
    .details-column-left{
     text-align:right;
     padding-right:2px;
    }
  
    .details-column-right{
     text-align:left;
     padding-left:2px;
    }
  
    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="details-container"&gt;
     &lt;div class="title-details"&gt;
       &lt;h5&gt;Details&lt;/h5&gt;
     &lt;/div&gt;
  
     &lt;div class="details"&gt;
      &lt;table class="center"&gt;
       &lt;tr&gt;
        &lt;th class="details-column-left"&gt;Title&lt;/th&gt;
        &lt;td class="details-column-right"&gt;Prince&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
        &lt;th class="details-column-left"&gt;Name&lt;/th&gt;
  
        &lt;td class="details-column-right"&gt;Vlad III the Impaler&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
        &lt;th class="details-column-left"&gt;Nationality&lt;/th&gt;
        &lt;td class="details-column-right"&gt;Romanian&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
  
        &lt;th class="details-column-left"&gt;Job&lt;/th&gt;
        &lt;td class="details-column-right"&gt;General&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
        &lt;th class="details-column-left"&gt;Extremely Long Header Text&lt;/th&gt;
        &lt;td class="details-column-right"&gt;Equally Long Value Text&lt;/td&gt;
       &lt;/tr&gt;
  
       &lt;tr&gt;
        &lt;th class="details-column-left"&gt;Header&lt;/th&gt;
        &lt;td class="details-column-right"&gt;Value&lt;/td&gt;
       &lt;/tr&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The text in the table (that is, the header cells text and the standard cells text) is generated server-side based on a database, so the values in them can be quite long or quite short (with a reasonable maximum length). The bosses want it as follows:</p>
  
  <ul>
  <li>The two columns must be justified against each other in the middle, with a small space inbetween.</li>
  <li>The table should expand so that all the text in each cell is on the same row.</li>
  <li>The title ("Details") should always be centered between the two columns, no matter what the ratio of widths are (as they will normally be about 60:40).</li>
  </ul>
  
  <p>I think I've managed to capture 1 and 2 okay - this table should expand if you add longer <code>th/td</code> s, and it should likewise get smaller if you remove them - but I'm struggling with number 3. I'm just not sure how to do it at all. I've tried using a <code>&lt;caption&gt;</code>, but that didnt help - it's still centered above the entire table, not centered above the column split.</p>
  
  <p>So, I'd appreciate any help getting the table to look 'right'. The only expected browser is apparently Firefox, versions 2 through 3.5 (although pushing 3.5 over 2 mostly). I apologise if I've missed any important information - please just ask and I'll add it.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Screenshot (red lines just for marking centre, not actually on table IRL):</p>
  
  <p><img src="https://i.stack.imgur.com/WUCWr.png" alt="The Table as it is now, and as I want it."></p>