Images fixed position despite resolution - html

Question

On my website I would like to have several images across the width of my page. When I am on my laptop (resolution: 1366x768) there's 7 image next to each other. When I test it on my smartphone there's 5 images next to each other and when I test it on a screen with resolution 1920x1080 there's 7 and some space open. What I want to do is get the middle 5 to always show on the screen (as this is my menu) and always in the middle of the screen. When the resolution gets changed, more or less images will appear on both sides.
In conclusion:
When on smartphone: 5 pictures.
When on laptop (normal screen): 7 pictures.
When on HD-screen: 9 pictures.
And always the 5 middle ones on the same position.
This is what I've got:
Html:
<div id="head-container">
<!--<div id="head-film"></div>-->
<div id="head-roll">
<div id="head-table">
<table>
<tr id="headTable">
<td>
<img src="./files/img/frame1.png"/>
</td>
<td>
<img src="./files/img/frame2.png"/>
</td>
<td>
<img src="./files/img/frame3.png"/>
</td>
<td>
<img src="./files/img/frame4.png"/>
</td>
<td>
<img src="./files/img/frame5.png"/>
</td>
<td>
<img src="./files/img/frame6.png"/>
</td>
<td>
<img src="./files/img/frame7.png"/>-->
</td>
</tr>
</table>
</div>
</div>
</div>
css:
div#head-table{
z-index:2;
position:absolute;
}
I have tried to seperate the table in 2 tables and let them each take 50% of the screen with a margin of 50% like this:
div#head-table-left{
width:50%;
margin-right:50%;
}
div#head-table-right{
width:50%;
margin-left:50%;
}
But when the resolution changes, the left table will stick to the left side of the screen.
Is there a way to solve this? Or something completely different? Thanks!

Answer 1

If you keep them all in one container (BTW, I'm not sure a table is ideal for content that's not actually tabular data: for a menu, a <ul> with the <li>s set to float:left or display: inline-block is a better HTML structure. But back to your question…) :)
I recommend keeping all the images in the same block and using 2 media queries to hide certain elements as the screen gets smaller.
#media screen and (max-width: 960px) {
#headTable td:nth-child(1),
#headTable td:nth-last-child(1) {
display: none;
}
}
#media screen and (max-width: 600px) {
#headTable td:nth-child(2),
#headTable td:nth-last-child(2) {
display: none;
}
}
I'm just using 600px and 960px as estimates: change those to whatever screen widths fit your design. Quick caveat: CSS nth-child selectors and media queries both work on IE 9+ and all other browsers. On older browsers, If you have to support lower browsers, you'll need a fallback solution - but only for widescreen IE7 / widescreen IE8, which are both pretty rare.