title: HTML CSS Responsive Table & CSS Before
body: <p>My aim is to create responsive tables design that look good when viewing on mobiles (width under 480px).</p>
  
  <p>I have the following markup for my table:</p>
  
  <pre><code>&lt;table class="table eventlist"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Time&lt;/th&gt;
              &lt;th&gt;Duration&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Cost&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
        &lt;td data-title="Code"&gt;AAC&lt;/td&gt;
              &lt;td data-title="Company"&gt;AUSTRALIAN AGRICULTURAL COMPANY LIMITED.&lt;/td&gt;
              &lt;td data-title="Price" class="numeric"&gt;$1.38&lt;/td&gt;
              &lt;td data-title="Change" class="numeric"&gt;-0.01&lt;/td&gt;
              &lt;td data-title="Change %" class="numeric"&gt;-0.36%&lt;/td&gt;
              &lt;td data-title="Open" class="numeric"&gt;$1.39&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>/* Landscape phones and down */
   @media (max-width: 480px) {
      /* 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;
          display:none;
      }
      tr {
          border: 1px solid #ccc;
      }
      td {
          /* Behave  like a "row" */
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding-left: 50%;
          white-space: normal;
          text-align:right;
      }
      td:before {
          padding-right: 10px;
          white-space: nowrap;
          text-align:left;
          font-weight: bold;
      }
      /*
      Label the data
      */
      td:before {
          content: attr(data-title);
      }
  }
  </code></pre>
  
  <p>My table ends up looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/n2MNC.png" alt="enter image description here"></p>
  
  <p>Would you say this is a good user friendly responsive design?</p>
  
  <p>How can I edit the line: </p>
  
  <pre><code>    td:before {
          content: attr(data-title);
      }
  </code></pre>
  
  <p>So that it reads the <code>&lt;th&gt;</code> for the column?</p>
  
  <p>Here is a live example: <a href="http://jsfiddle.net/liammccann1992/n4rUG/2/" rel="nofollow noreferrer">JS Fiddle</a></p>