[CSS3] Responsive Table -- no more table

 <table>
      <thead>
        <tr>
          <th>Team</th>
          <th>1st</th>
          <th>2nd</th>
          <th>3rd</th>
          <th>4th</th>
          <th>5th</th>
          <th>6th</th>
          <th>7th</th>
          <th>8th</th>
          <th>9th</th>
          <th>Final</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-th="Team">Toronto</td>
          <td data-th="1st">0</td>
          <td data-th="2nd">0</td>
          <td data-th="3rd">0</td>
          <td data-th="4th">4</td>
          <td data-th="5th">0</td>
          <td data-th="6th">1</td>
          <td data-th="7th">0</td>
          <td data-th="8th">0</td>
          <td data-th="9th">0</td>
          <td data-th="Final">5</td>
        </tr>
        <tr>
          <td data-th="Team">San Francisco</td>
          <td data-th="1st">0</td>
          <td data-th="2nd">0</td>
          <td data-th="3rd">0</td>
          <td data-th="4th">4</td>
          <td data-th="5th">0</td>
          <td data-th="6th">0</td>
          <td data-th="7th">0</td>
          <td data-th="8th">0</td>
          <td data-th="9th">0</td>
          <td data-th="Final">4</td>
        </tr>
      </tbody>

table, thead, tbody, th, td, tr {
          display: block;
        }

        thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }

       /*The actually content will be on the right side*/
       td { 
          position: relative;
          padding-left: 50%; 
        }
        
       /*Using data-th to set the value and set position to left*/
        td:before { 
          position: absolute;
          left: 6px;
          content: attr(data-th);
          font-weight: bold;
        }