Irishstu.com stublog

Found and shared

Tables & Responsive Design Part 2 – nchilds

26 comments

Update Dec 2012: Having seen the improvements and discussion around responsive tables and responsive design in general, I think that while this post is an interesting technical exercise, hiding content from mobile devices is usually a bad idea – you’re making assumptions you just can’t back up. I’ll leave this up for historical reasons but I’d advise using something that doesn’t hide content.


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.