Horizontal scrollable table that is responsive

Joined
Jan 14, 2023
Messages
8
Reaction score
0
Dear expert people,
I am currently trying to create a horizontally scrollable table (filled with pictures) where my content (img with some p) always fitts the screen. This means the height of the content has to adapt depening on your screen resolution or ideally also when browsing from a mobile device...
I've tried a lot with HTML and CSS and actually thought this should be an easy task, but I just can't get it to work properly :(
I'd really appreciate some help. How'd you do this?
Thanks in advance!
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
The BEST way to get help with what you want to do is to post the code you wrote that comes the closest to what you want and explain where the problem lies.
And don't say things like (img with some p) - I think you mean text instead of 'p' and image instead of img. Overall I think you mean An image that contains text. Or do you mean An image with text ( over it, under it, on either side of it.

A better explanation gets results.
 
Joined
Jan 14, 2023
Messages
8
Reaction score
0
^ your are correct, thanks :).
I'm indeed talking about a table filled with images and some additional text beneath it (like a caption). Regarding code - as told before - I've tried different stuff and erased again... So the following is pretty basic but you'll hopefully get an idea


HTML:
<!DOCTYPE html>
<html>
    <head>
        <style>
            table {border: hidden;}
            p {text-align: Left; font-family: "Gill Sans", Sans-Serif; color: #FFFFFF; font-size: 1.3vw;}
</style>
    </head>
    
    <body>
        <div style="overflow-x:auto;">
        <table>
            <td style="min-width:1400px;"><img src="http://...1.jpg" alt=" pic 1"><p>caption 1</p></td>
            <td style="min-width:636px;"><img src="http://...2.jpg" alt=" pic 2“><p>caption 2</p></td>
            <td style="min-width:1400px;"><img src="http://...3.jpg" alt=" pic 3“><p>caption 3</p></td>
            <td style="min-width:1400px;"><img src="http://...4.jpg" alt=" pic 4“><p>caption 4</p></td>
            <td style="min-width:636px;"><img src="http://...5.jpg" alt=" pic 5“><p>caption 5</p></td>
            <td style="min-width:1400px;"><img src="http://...6.jpg" alt=" pic 6“><p>caption 6</p></td>
            <td style="min-width:1400px;"><img src="http://...7.jpg" alt=" pic 7“><p>caption 7</p></td>
        </table>
        </div>
    </body>
</html>
 
Joined
Jan 17, 2023
Messages
2
Reaction score
0
Have you tried adding the meta viewport element?
E.g
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
...is the min-width thing maybe a problem?
Yes and you don't have <tr> and you should have a height and width for every image
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    table {border: hidden;}
    p {text-align: Left; font-family: "Gill Sans", Sans-Serif; color: #FFFFFF; font-size: 1.3vw;}
</style>
</head>

<body>
<div style="overflow-x:auto;">
    <table>
    <tr>
        <td><img src="1.jpg" height = "100" width = "100" alt="sam"></br>caption 1</td>
        <td><img  src= "2.jpg" height = "100" width = "100" alt="sam" ></br>caption 2</td>
        <td><img src="3.jpg" height = "100" width =  "100" alt="sam"></br>caption 3</td>
        <td><img src="4.jpg" height = "100" width = "100" alt="sam" ></br>caption 4</td>
        <td><img  src="5.jpg" height = "100" width = "100" alt="sam" ></br>caption 5</td>
        <td><img src="6.jpg" height = "100" width = "100" alt="sam" ></br>caption 6</td>
        <td><img src="7.jpg" height = "100" width = "100"  alt="sam"></br>caption 7</td>
    </tr>
    </table>
    </div>
</body>
</html>
 
Joined
Jan 14, 2023
Messages
8
Reaction score
0
Yes and you don't have <tr> and you should have a height and width for every image
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    table {border: hidden;}
    p {text-align: Left; font-family: "Gill Sans", Sans-Serif; color: #FFFFFF; font-size: 1.3vw;}
</style>
</head>

<body>
<div style="overflow-x:auto;">
    <table>
    <tr>
        <td><img src="1.jpg" height = "100" width = "100" alt="sam"></br>caption 1</td>
        <td><img  src= "2.jpg" height = "100" width = "100" alt="sam" ></br>caption 2</td>
        <td><img src="3.jpg" height = "100" width =  "100" alt="sam"></br>caption 3</td>
        <td><img src="4.jpg" height = "100" width = "100" alt="sam" ></br>caption 4</td>
        <td><img  src="5.jpg" height = "100" width = "100" alt="sam" ></br>caption 5</td>
        <td><img src="6.jpg" height = "100" width = "100" alt="sam" ></br>caption 6</td>
        <td><img src="7.jpg" height = "100" width = "100"  alt="sam"></br>caption 7</td>
    </tr>
    </table>
    </div>
</body>
</html>
Looking good, but when adding a width and height = "100" my pictures appear very small in the table (think a thumbnail), not in their actual size...
 
Joined
Jan 14, 2023
Messages
8
Reaction score
0
Don't use 100 - use the size you want the images!!
sorry! It somehow does the job regarding being responsive, but the whole table with is now the screen-width which means it isn't scrollable horizontally anymore :(
 
Joined
Jan 14, 2023
Messages
8
Reaction score
0
any more ideas? would really appreciate as I am still struggling with this. Can it be so hard to accomplish... :(
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,034
Messages
2,570,356
Members
47,002
Latest member
RobertoLip

Latest Threads

Top