title: CSS: Labels in table columns
body: <p><strong>BACKGROUND:</strong></p>
  
  <p>I would like to have small labels in columns of a table.
  I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).</p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>With my current CSS approach, the vertical padding of the cell comes from the &lt;<code>span</code>> element (set to <code>display: block</code> with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <code>&lt;span&gt;</code> is empty or missing (no value) and the label is not in place.</p>
  
  <p>The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <code>&lt;span&gt;</code> is not there.</p>
  
  <p>I realize that I could use "non-breaking-space", but I would really like to avoid it.</p>
  
  <p>I wonder if any of you have a fix / better way to do this? current code is below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;ah&lt;/title&gt;
  &lt;style&gt;
  
  body {
   width: 320px;
  }
  
  /* TABLE */
  
  table { width: 100%; border-collapse: collapse; font-family: arial; }
  th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
  th:last-child, td:last-child { border-right-width: 1px; }
  tr:first-child th { border-top-width: 1px; background: #efefef; }
  
  /* RELEVANT STUFF */
  
  td {
   padding: 3px;
  }
  
  td sup {
   display: block;
  }
  
  td span {
   display: block;
   margin: 3px 0px;
   text-align: center;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th colspan="3"&gt;something&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;sup&gt;some label&lt;/sup&gt;&lt;span&gt;any content&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;sup&gt;some label&lt;/sup&gt;&lt;span&gt;any content&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;sup&gt;some label&lt;/sup&gt;&lt;span&gt;&lt;/span&gt;&lt;/td&gt;&lt;!-- No content, just a label --&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>