Search code examples
htmlcsshtml-tablegrid-layout

Adjust table with images in every row inside a div

I have defined a layout which has many elements. One of these element is a grey box (a div) in which I place a table. That table has rows and it contains small images.

What I want to achieve is to adjust the table inside it parents. I want the images to be loaded automatically depending on how many they are (quantity of images is variable)... so when reaching the grey box max size the line should break and send the images to the next row. Is this possible?

Furthermore I try to make it resizable to different screen sizes.

Here Css and Html snippet:

body {
   background-color:  #141414;
   margin-top:3%;
   margin-left: 2%;
   margin-right: 2%;
}


.video-item {
   width: 30%; 
   float: left; 
   margin-bottom: 5px;
}

.video-item-2 {
   width: 66%; 
   float: left; 
   margin-bottom: 20px;
}

.video-display {
   background-color: #1F1F1F; 
   height: 450px;
}

p {
   color: white;
   text-align: center;
}

#thumbs {
   word-wrap: break-word; 
   table-layout:fixed;
   width: 100%;
}

#thumbnail-grid {
   background-color: #1F1F1F; 
   height: 450px;

}

.video-spacer {
   width: 2%;
   float: left;
   min-height: 200px;
}

#arrow_up, #arrow_down {
   display: block;
   margin: 0 auto;
}

#arrow_down {
   -ms-transform: rotate(180deg); /* IE 9 */
   -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
   transform: rotate(180deg);
  }
<body>
<div class="video-item">
  <p class="font-semibold">Something else</p>         
  <div class="video-display"></div>
</div>
  
<div class="video-spacer"></div>

<div class="video-item-2">
    <p class="font-semibold">THUMBNAIL PREVIEW</p>
      <div id="thumbnail-grid">
        <img id="arrow_up" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45">
          <table id="thumbs">
             <tr>
                  <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
               <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
               </tr>
           </table>
           <img id="arrow_down" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45">
         </div>
</div>
</body>

I would like to solve this with css only but if js or jquery is necessary, then I accept it.

Thanks!

Solution

  • Here is a solution which, when reaches the width, break into new lines.

    body {
   background-color:  #141414;
   margin-top:3%;
   margin-left: 2%;
   margin-right: 2%;
}


.video-item {
   width: 30%; 
   float: left; 
   margin-bottom: 5px;
}

.video-item-2 {
   width: 66%; 
   float: left; 
   margin-bottom: 20px;
}

.video-display {
   background-color: #1F1F1F; 
   height: 450px;
}

p {
   color: white;
   text-align: center;
}

#thumbs {
  text-align: center;
  max-height: 400px;
  overflow: auto;
}

#thumbnail-grid {
   background-color: #1F1F1F; 
   height: 450px;
}

.video-spacer {
   width: 2%;
   float: left;
   min-height: 200px;
}

#arrow_up, #arrow_down {
   display: block;
   margin: 0 auto;
}

#arrow_down {
   -ms-transform: rotate(180deg); /* IE 9 */
   -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
   transform: rotate(180deg);
  }
    <body>
<div class="video-item">
  <p class="font-semibold">Something else</p>         
  <div class="video-display"></div>
</div>
  
<div class="video-spacer"></div>

<div class="video-item-2">
    <p class="font-semibold">THUMBNAIL PREVIEW</p>
      <div id="thumbnail-grid">
        <img id="arrow_up" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45">
        
          <div id="thumbs">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">

            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">

            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">

            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">
            <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60">

          </div>
        <img id="arrow_down" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45">
      </div>
</div>
</body>