Dynamically altering a table for a responsive web page


#1

I have a web page for a photo gallery with twelve photos contained in a 3x4 table. When the width of the browser window is resized down to a certain point, I would like the table to “collapse” into one column with twelve rows – basically one column of twelve photos rather than three columns of four each. How can I do this with CSS?

Here is the HTML of my table just in case it helps:

  <table id="gallery">
    <tbody>
      <tr>
        <td><a href="images/gallery_01.jpg" target="_blank"><img class="photo" src="images/gallery_01.jpg" width="280" height="144" alt=""/></a></td>
        <td><a href="images/gallery_02.jpg" target="_blank"><img class="photo" src="images/gallery_02.jpg" width="280" height="145" alt=""/></a></td>
        <td><a href="images/gallery_09.jpg" target="_blank"><img class="photo" src="images/gallery_09.jpg" width="280" height="127" alt=""/></a></td>
      </tr>
      <tr>
        <td><a href="images/gallery_04.jpg" target="_blank"><img class="photo" src="images/gallery_04.jpg" width="280" height="121" alt=""/></a></td>
        <td><a href="images/gallery_06.jpg" target="_blank"><img class="photo" src="images/gallery_06.jpg" width="280" height="123" alt=""/></a></td>
        <td><a href="images/gallery_12.jpg" target="_blank"><img class="photo" src="images/gallery_12.jpg" width="280" height="116" alt=""/></a></td>
      </tr>
      <tr>
        <td><a href="images/gallery_07.jpg" target="_blank"><img class="photo" src="images/gallery_07.jpg" width="280" height="153" alt=""/></a></td>
        <td><a href="images/gallery_08.jpg" target="_blank"><img class="photo" src="images/gallery_08.jpg" width="280" height="162" alt=""/></a></td>
        <td><a href="images/gallery_03.jpg" target="_blank"><img class="photo" src="images/gallery_03.jpg" width="280" height="162" alt=""/></a></td>
      </tr>
      <tr>
        <td><a href="images/gallery_05.jpg" target="_blank"><img class="photo" src="images/gallery_05.jpg" width="280" height="194" alt=""/></a></td>
        <td><a href="images/gallery_10.jpg" target="_blank"><img class="photo" src="images/gallery_10.jpg" width="280" height="214" alt=""/></a></td>
        <td><a href="images/gallery_11.jpg" target="_blank"><img class="photo" src="images/gallery_11.jpg" width="280" height="224" alt=""/></a></td>
      </tr>
    </tbody>
  </table>

#2

Don’t use a table, it’s not tabular data, it’s an image gallery.

Flex can lay it out for you and a media query can stack them into blocks.

Something like this if I’m understanding you correctly…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
img {
  display:block;
  width:100%;
  height:auto;
  max-width:280px;
  margin:0 auto;
}
.wrap > div {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:20px 0;
}
.wrap > div div {
  flex:0 1 280px;
  margin:0 10px;
}
@media all and (max-width: 400px) {
  .wrap > div {
    display:block;
  }
  .wrap > div div {
    margin:10px 0;
  }
}
</style>

</head>
<body>

<div class="wrap">
  <div>
    <div><a href="images/gallery_01.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x144.jpg" width="280" height="144" alt="img 1"/></a></div>
    <div><a href="images/gallery_02.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x145.jpg" width="280" height="145" alt="img 2"/></a></div>
    <div><a href="images/gallery_09.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x127.jpg" width="280" height="127" alt="img 3"/></a></div>
  </div>
  <div>
    <div><a href="images/gallery_04.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x121.jpg" width="280" height="121" alt="img 4"/></a></div>
    <div><a href="images/gallery_06.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x123.jpg" width="280" height="123" alt="img 5"/></a></div>
    <div><a href="images/gallery_12.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x116.jpg" width="280" height="116" alt="img 6"/></a></div>
  </div>
  <div>
    <div><a href="images/gallery_07.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x153.jpg" width="280" height="153" alt="img 7"/></a></div>
    <div><a href="images/gallery_08.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x162.jpg" width="280" height="162" alt="img 8"/></a></div>
    <div><a href="images/gallery_03.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x162.jpg" width="280" height="162" alt="img 9"/></a></div>
  </div>
  <div>
    <div><a href="images/gallery_05.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x194.jpg" width="280" height="194" alt="img 10"/></a></div>
    <div><a href="images/gallery_10.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x214.jpg" width="280" height="214" alt="img 11"/></a></div>
    <div><a href="images/gallery_11.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x224.jpg" width="280" height="224" alt="img 12"/></a></div>
  </div>
</div>

</body>
</html>

#3

Hi there Morthian,

I would be inclined to treat the gallery as a list…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1 {
    font-size: 1.5em;
    text-align: center;
    text-transform: uppercase;
 }

#links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 55em;
    padding: 0.5em;
    margin: 0 auto;
    border: 1px solid #999;
    background-color: #fff;
    list-style: none;
 }

#links li {
    max-width: 17.5em;
 }

@media ( max-width: 56em ) {
#links {
    width: 19em;
  }
 }

</style>

</head>
<body> 
 <h1>gallery links</h1>
 <ul id="links">
  <li><a href="#"><img src="http://placehold.it/280x144" width="280" height="144" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x145" width="280" height="145" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x127" width="280" height="127" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x121" width="280" height="121" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x123" width="280" height="123" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x116" width="280" height="116" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x153" width="280" height="153" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x153" width="280" height="153" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x162" width="280" height="162" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x194" width="280" height="194" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x214" width="280" height="214" alt=""></a></li>
  <li><a href="#"><img src="http://placehold.it/280x224" width="280" height="224" alt=""></a></li>
 </ul>
  
</body>
</html>

coothead