title: Responsive table is hiding columns with no values
body: <p>On one of my pages, I have a responsive table that changes layout when the browser gets small. When the columns in my table have values, everything works correctly, as shown <a href="http://jsfiddle.net/hcz88" rel="nofollow">in this fiddle</a>.</p>
  
  <p>When the columns do not have values, however, some of them don't show up in the small-version of the table's layout, as shown <a href="http://jsfiddle.net/hcz88/1" rel="nofollow">in this fiddle</a>.</p>
  
  <p>What am I missing?</p>
  
  <p>I have also copied the requisite code from the non-working version below:</p>
  
  <pre><code>@media only screen and (max-width: 760px),
   (min-device-width: 768px) and (max-device-width: 1024px) {
      /* Force table to not be like tables anymore */
      table, thead, tbody, th, td, tr { 
          display: block; 
      }
  
      /* Hide table headers (but not display: none;, for accessibility) */
      thead tr { 
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
  
      tr { border: 1px solid #ccc; }
  
      td { 
          /* Behave  like a "row" */
          border: none;
          border-bottom: 1px solid #eee; 
          position: relative;
          padding-left: 50%; 
      }
  
      td:before { 
          /* Now like a table header */
          position: absolute;
          /* Top/left values mimic padding */
          top: 6px;
          left: 6px;
          width: 45%; 
          padding-right: 10px; 
          white-space: nowrap;
      }
  
      /* Label the data */
      td:nth-of-type(1):before { content: "MFG P/N"; }
      td:nth-of-type(2):before { content: "MFG Name"; }
      td:nth-of-type(3):before { content: "Part ID"; }
      td:nth-of-type(4):before { content: "Description"; }
      td:nth-of-type(5):before { content: "Cost"; }
      td:nth-of-type(6):before { content: "Price"; }
      td:nth-of-type(7):before { content: "On Hand"; }
      td:nth-of-type(8):before { content: "On Order"; }
      td:nth-of-type(9):before { content: "Allocated"; }
      td:nth-of-type(10):before { content: "Shipped"; }
      td:nth-of-type(11):before { content: "Report"; }
      td:nth-of-type(12):before { content: "RMA"; }
      td:nth-of-type(10):before { content: "File"; }
      td:nth-of-type(10):before { content: "Add Part"; }
  }
  </code></pre>