Responsive Tabular Column

* { margin: 0; padding: 0; } body { font: 14px/1.4 Georgia, Serif; } #page-wrap { margin: 50px; } p { margin: 20px 0; }
table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { background: #eee; }
th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }
@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {
table, thead, tbody, th, td, tr { display:block; } thead tr { position:absolute; top:-9999px; left:-9999px; }
tr { border:1px solid #ccc; } td { border:none; border-bottom:1px solid #eee; position:relative; padding-left:50%; }
td:before { position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; }
td:nth-of-type(1):before { content:"Name"; } td:nth-of-type(2):before { content:"Wickets"; }
td:nth-of-type(3):before { content:"Run"; } td:nth-of-type(4):before { content:"Minits"; }
td:nth-of-type(5):before { content:"Ball"; } td:nth-of-type(6):before { content:"4s"; }
td:nth-of-type(7):before { content:"6s"; } td:nth-of-type(:before { content:"sr"; }
td:nth-of-type(9):before { content:"GPA"; } td:nth-of-type(10):before { content:"Arbitrary Data"; } }
@media only screen and (min-device-width :320px) and (max-device-width :480px) { body { padding:0; margin:0; width:320px; } }
@media only screen and (min-device-width:768px) and (max-device-width:1024px) { body { width:495px; } }

<table>
<tr><td colspan="2">India 1st innings</td><td>Wickets</td><td>R</td><td>M</td><td>B</td><td>4s</td><td>6s</td><td>SR</td></tr>
<tr><td width="451">M Vijay</td><td width="259">c †de Villiers b Morkel</td><td>6</td><td>69</td><td>42</td><td>1</td><td>0</td><td>14.28</td></tr>
<tr><td width="451">S Dhawan</td><td width="259">c Imran Tahir b Steyn</td><td>13</td><td>37</td><td>27</td><td>2</td><td>0</td><td>48.14</td></tr>
<tr><td width="451">CA Pujara</td><td width="259">run out (Imran Tahir/Amla)</td><td>25</td><td>148</td><td>98</td><td>2</td><td>0</td><td>25.51</td></tr>
<tr><td width="451">V Kohli</td><td width="259">c Duminy b Kallis</td><td>119</td><td>257</td><td>181</td><td>18</td><td>0</td><td>65.74</td></tr>
<tr><td width="451">RG Sharma</td><td width="259">b Philander </td><td>14</td><td>46</td><td>42</td><td>1</td><td>0</td><td>33.33</td></tr>
<tr><td width="451">>AM Rahane</a></td><td width="259">b Philander</td><td>47</td><td>200</td><td>137</td><td>8</td><td>0</td><td>34.30</td></tr>
<tr><td width="451">MS Dhoni*†</td><td width="259">c †de Villiers b Morkel</td><td>19</td><td>104</td><td>72</td><td>3</td><td>0</td><td>26.38</td></tr>
<tr><td width="451">R Ashwin</td><td width="259">not out</td><td>11</td><td>24</td><td>13</td><td>1</td><td>0</td><td>84.61</td></tr>
<tr><td width="451">Z Khan</a></td><td width="259">lbw b Philander</td><td>0</td><td>2</td><td>1</td><td>0</td><td>0</td><td>0.00</td></tr>
<tr><td width="451">I Sharma</td><td width="259">b Philander</td><td>0</td><td>11</td><td>4</td><td>0</td><td>0</td><td>0.00</td></tr>
<tr><td width="451">Mohammed Shami</td><td width="259">b Morkel</td><td>0</td><td>7</td><td>3</td><td>0</td><td>0</td><td>0.00</td></tr>
<tr><td>Extras</td><td>(b 4, lb 6, w 14, nb 2)</td><td>26</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Total</td><td>(all out; 103 overs; 454 mins)</td><td>280</td><td colspan="5">(2.71 runs per over)</td></tr>
</table>

Tagged in:

• Responsive Tabular Column
• Responsive Table
• css3 Responsive temp
• CSS3