Wie CSS Tabellenzeile aus gehen Offscreen

Question

Hier ist die JSFiddle zu stoppen: https://jsfiddle.net/xerooz5p/

<div class="row"> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:3KiexfmhxHvG5IgAElmTkd"> 
       <img src="https://i.scdn.co/image/1e6c3774deb8c44852ac169e03ce3f7a37c936af" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">Please Please Me (Remastered)</div> 
       <span class="caption">Please Please Me - 1</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:4ekUX4pWizXXksJe0JfS9U"> 
       <img src="https://i.scdn.co/image/1e684af9619d7310229826fab2d6ce490cb954f1" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">With The Beatles (Remastered)</div> 
       <span class="caption">With The Beatles - 3</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:5J2CHimS7dWYMImCHkEFaJ"> 
       <img src="https://i.scdn.co/image/56f312139863addd3837e68e6c198150e80f510a" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">A Hard Day&#39;s Night (Remastered)</div> 
       <span class="caption">A Hard Day&#39;s Night - 2</span>     
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:4ltC6PrqkTtpcRNi5lvS4z"> 
       <img src="https://i.scdn.co/image/863e2f879a99e4afb084a6d0eb39ef37e596d5d2" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">Beatles For Sale (Remastered)</div> 
       <span class="caption">Beatles For Sale - 4</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:06ypiqmILMdVeaiErMFA91"> 
       <img src="https://i.scdn.co/image/e26910fd9e7bb1671213cb9ed06a855077ddd79f" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">Rubber Soul (Remastered)</div> 
       <span class="caption">Rubber Soul - 3</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:4BRkPBUxOYffM2QXVlq7aC"> 
       <img src="https://i.scdn.co/image/75ef0990aa0bb02ef7f6a52d41cc2c4c8028c3ba" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">Revolver (Remastered)</div> 
       <span class="caption">Revolver - 4</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:0qHMhBZqYb99yhX9BHcIkV"> 
       <img src="https://i.scdn.co/image/5efcba83e06ce03ca843b459a4189f861ddc5f23" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">Magical Mystery Tour (Remastered)</div> 
       <span class="caption">Magical Mystery Tour - 2</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:0j3p1p06deJ7f9xmJ9yG22"> 
       <img src="https://i.scdn.co/image/2782d94528b449fb6910300cc8c8f93ab8cc7a8d" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">The Beatles (Remastered)</div> 
       <span class="caption">The Beatles - 5</span>    
      </div> 

     </div> 

     <div class="cellForAlbum"> 

      <a href="spotify:track:0CaBBQsaAiRHhiLmzi7ZRp"> 
       <img src="https://i.scdn.co/image/b3651a85f2bca826b38194c51d09cd7b068aa3ab" alt="" /> 
      </a> 

      <div class="albumName"> 
       <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
       <div style="display:none;">Let It Be (Remastered)</div> 
       <span class="caption">Let It Be - 2</span>    
      </div> 

     </div> 

</div> 

Im Moment ist die Breite der Tabellenzeile wird durch die Menge der Zellen immer gesetzt, die dort sind. Also ist die Breite etwas wie 1600 und es geht vom Bildschirm weg und ich muss horizontal scrollen, um sie zu sehen. Gibt es eine Möglichkeit, dies zu stoppen, damit es nicht über die Breite meines Monitors hinausgeht?

Answer 1

vielleicht table-layout ist das, was Sie suchen und schließlich max-width für img:

.table { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.cellForArtistName { 
 
    display: table-cell; 
 
} 
 
.cellForAlbum { 
 
    display: table-cell; 
 
    overflow: hidden; 
 
    padding: 5px; 
 
} 
 
.artistName { 
 
    font-size: 40px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding-bottom: 10px; 
 
    padding-top: 35px; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.albumName { 
 
    /*width: 175px;*/ 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cellForArtistName"> 
 
     <p class="artistName">The Beatles</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:3KiexfmhxHvG5IgAElmTkd"> 
 
     <img src="https://i.scdn.co/image/1e6c3774deb8c44852ac169e03ce3f7a37c936af" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">Please Please Me (Remastered)</div> 
 
     <span class="caption">Please Please Me - 1</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:4ekUX4pWizXXksJe0JfS9U"> 
 
     <img src="https://i.scdn.co/image/1e684af9619d7310229826fab2d6ce490cb954f1" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">With The Beatles (Remastered)</div> 
 
     <span class="caption">With The Beatles - 3</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:5J2CHimS7dWYMImCHkEFaJ"> 
 
     <img src="https://i.scdn.co/image/56f312139863addd3837e68e6c198150e80f510a" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">A Hard Day&#39;s Night (Remastered)</div> 
 
     <span class="caption">A Hard Day&#39;s Night - 2</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:4ltC6PrqkTtpcRNi5lvS4z"> 
 
     <img src="https://i.scdn.co/image/863e2f879a99e4afb084a6d0eb39ef37e596d5d2" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">Beatles For Sale (Remastered)</div> 
 
     <span class="caption">Beatles For Sale - 4</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:06ypiqmILMdVeaiErMFA91"> 
 
     <img src="https://i.scdn.co/image/e26910fd9e7bb1671213cb9ed06a855077ddd79f" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">Rubber Soul (Remastered)</div> 
 
     <span class="caption">Rubber Soul - 3</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:4BRkPBUxOYffM2QXVlq7aC"> 
 
     <img src="https://i.scdn.co/image/75ef0990aa0bb02ef7f6a52d41cc2c4c8028c3ba" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">Revolver (Remastered)</div> 
 
     <span class="caption">Revolver - 4</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:0qHMhBZqYb99yhX9BHcIkV"> 
 
     <img src="https://i.scdn.co/image/5efcba83e06ce03ca843b459a4189f861ddc5f23" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">Magical Mystery Tour (Remastered)</div> 
 
     <span class="caption">Magical Mystery Tour - 2</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:0j3p1p06deJ7f9xmJ9yG22"> 
 
     <img src="https://i.scdn.co/image/2782d94528b449fb6910300cc8c8f93ab8cc7a8d" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">The Beatles (Remastered)</div> 
 
     <span class="caption">The Beatles - 5</span> 
 
     </div> 
 
    </div> 
 
    <div class="cellForAlbum"> 
 
     <a href="spotify:track:0CaBBQsaAiRHhiLmzi7ZRp"> 
 
     <img src="https://i.scdn.co/image/b3651a85f2bca826b38194c51d09cd7b068aa3ab" alt="" /> 
 
     </a> 
 
     <div class="albumName"> 
 
     <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div --> 
 
     <div style="display:none;">Let It Be (Remastered)</div> 
 
     <span class="caption">Let It Be - 2</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>