Having thought about responsive tables and progressively showing data a bit more, I’ve found a much simpler way based on using nth-child selectors with CSS – this is much cleaner than applying styles to individual tables, and should work for iPhones and most browsers that respect media queries in the first place.

Here’s the updated file – table-childs.

The HTML:

<table id="iseqchart">

<tr>
	<th id="index">Index</th>
	<th id="value">Value</th>
	<th id="change">Change</th>
	<th id="changepercent">Change %</th>
	<th id="yhigh">Year High</th>
	<th id="ylow">Year Low</th>
	<th id="dhigh">Daily Low</th>
	<th id="dlow">Daily High</th>
	<th id="turnover">Turnover €(Mil.)</th>
</tr>
<tr>
	<td>ISEQ® Overall</td>
	<td>2,725.99</td>
	<td class="neg">-15.30</td>
	<td class="neg">-0.56%</td>
	<td>3,037.89</td>
	<td>2,333.35</td>
	<td>2,712.84</td>
	<td>2,743.31</td>
	<td>24.00</td>
</tr>
<tr>
	<td>ISEQ® Financial</td>
	<td>130.77</td>
	<td class="neg">-3.24</td>
	<td class="neg">-2.42%</td>
	<td>493.83</td>
	<td>101.54</td>
	<td>130.43</td>
	<td>136.14</td>
	<td>2.76</td>
</tr>
<tr>
	<td>ISEQ® General</td>
	<td>3,751.79</td>
	<td class="neg">-17.49</td>
	<td class="neg">-0.46%</td>
	<td>4,146.84</td>
	<td>3,188.68</td>
	<td>3,731.15</td>
	<td>3,770.88</td>
	<td>21.24</td>
</tr>
<tr>
	<td>ISEQ® Small Cap.</td>
	<td>1,661.94</td>
	<td class="pos">3.76</td>
	<td class="pos">0.23%</td>
	<td>2,175.60</td>
	<td>1,633.21</td>
	<td>1,643.92</td>
	<td>1,661.94</td>
	<td>0.20</td>
</tr>
</table>

The CSS:

<style>
#iseqchart	{
	border:1px solid #000;
	border-collapse:collapse;
	font-family:Arial, Sans-Serif;
	font-size:12px;
	text-align:right;
	}

#iseqchart th	{
	border:1px solid #333;
	padding:3px 6px;
	}

#iseqchart td	{
	border:1px solid #999;
	padding:3px 6px;
	}

.neg	{
	color:red;
}

.pos	{
	color:green;
}

@media only screen and (max-width: 768px) {
	#turnover, tr td:nth-child(9)		{ display:none; visibility:hidden; }
}

@media only screen and (max-width: 420px) {
	#changepercent, tr td:nth-child(4)	{ display:none; visibility:hidden; }
	#yhigh, tr td:nth-child(5)			{ display:none; visibility:hidden; }
	#ylow, tr td:nth-child(6)			{ display:none; visibility:hidden; }
	#turnover, tr td:nth-child(9)		{ display:none; visibility:hidden; }
}

@media only screen and (max-width: 320px) {
	#changepercent, tr td:nth-child(4)	{ display:none; visibility:hidden; }
	#yhigh, tr td:nth-child(5)			{ display:none; visibility:hidden; }
	#ylow, tr td:nth-child(6)			{ display:none; visibility:hidden; }
	#dhigh, tr td:nth-child(7)			{ display:none; visibility:hidden; }
	#dlow, tr td:nth-child(8)			{ display:none; visibility:hidden; }
	#turnover, tr td:nth-child(9)		{ display:none; visibility:hidden; }
}

</style>

The result:

Much cleaner markup where we are targeting cells mathematically, rather than with classes.