skip to Main Content

I am trying to create an adaptive table from a php array for a video gallery.
I have found many examples that work for me to create an adaptive table and to create a table from an array but i cannot seam to create an adaptive table from the array.

my array is paginated and displays 10 results at a time. Each result is a video thumbnail and would like for the table to display five columns on one row before continuing on the next row and auto adapt for mobile screens to only have one column with all the rows in the paginated results.

I’m desperately trying to make this make sense so please bare with me and I will answer any questions that are asked.

My current configuration (simple example not adaptive) that is not working the way i want is:

<table>
<td>
<table>
<tbody>
<tr>
<?php foreach ($data as $row)) { ?>
<td>
<a href="#">
<video autoplay muted width="200" preload="metadata">
<source src="/vid/<?php echo $row['source']; ?>#t=1,10" type="video/mp4">
</video>
</a>
</td>
<?php } ?>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>

and outputs:

should return on new row after 5 images

you can se the result runs off the screen and wont return to the next line.

in the mobile version it just shrinks everything to fit:

shrinks eveything

I know its going to end up being something simple but i am terrible with tables and just don’t understand how to make this work.

Thank you for any help you can provide with making tables respond this way.

2

Answers


  1. Chosen as BEST ANSWER

    The suggestion by user CBroe works. Please see reference link.

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side_resp


  2. Have you tried a flex-box? try looking on this

    https://www.w3schools.com/css/css3_flexbox_responsive.asp

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search