Horizontal scrollable table that is responsive

PuertoN · Jan 14, 2023

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!

PuertoN · Jan 15, 2023

so, no ideas?

BigDady · Jan 15, 2023

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.

PuertoN · Jan 15, 2023

^ 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>

PuertoN · Jan 16, 2023

...is the min-width thing maybe a problem?

<K8="codes"> · Jan 17, 2023

Have you tried adding the meta viewport element?
E.g
<meta name="viewport" content="width=device-width, initial-scale=1.0">

BigDady · Jan 17, 2023

...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>

PuertoN · Jan 17, 2023

<K8=codes> said:
Have you tried adding the meta viewport element?
E.g
<meta name="viewport" content="width=device-width, initial-scale=1.0">

No, but it's worth a try. Where'd you put this in the code? Right behind each < td >?

PuertoN · Jan 17, 2023

BigDady said:

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...

BigDady · Jan 18, 2023

Don't use 100 - use the size you want the images!!

PuertoN · Jan 18, 2023

BigDady said:
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

PuertoN · Jan 20, 2023

any more ideas? would really appreciate as I am still struggling with this. Can it be so hard to accomplish...

Help with my responsive home page	2	Dec 14, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
menu bar and banner responsive issues....any guidance is appreciated!	0	Apr 5, 2016
scrollable table with horizontal scroll?	1	Aug 8, 2008
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help with code	0	Jun 12, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Why does is this highlighting in Firefox	18	Sep 24, 2009

Horizontal scrollable table that is responsive

PuertoN

PuertoN

BigDady

PuertoN

PuertoN

<K8="codes">

BigDady

PuertoN

PuertoN

BigDady

PuertoN

PuertoN

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads