CODEWITHSUNDEEP
cssimageresponsive
ocin 6891
ocin 6891

Reputation: 1

Scrollable table responsive

I am currently in the process of programming a new website for myself and for this I am using a Wordpress template, to fill it with html and css code. Site is not responsive and the content is too big

code example here

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         html {height: 100%;}
         body {min-height: 100%;}
         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:636px;"><img src="http://..._tunnelv-001.jpg" alt="'Tunnel Vision 1'"></td>
            <td style="min-width:636px;"><img src="http://..._tunnelv-002.jpg" alt="'Tunnel Vision 2'"></td>
            <td style="min-width:636px;"><img src="http://..._tunnelv-003.jpg" alt="'Tunnel Vision 3'"></td>
            <td style="min-width:636px;"><img src="http://..._tunnelv-004.jpg" alt="'Tunnel Vision 4'"></td>
            <td style="min-width:636px;"><img src="http://..._tunnelv-005.jpg" alt="'Tunnel Vision 5'"></td>
            <td style="min-width:636px;"><img src="http://..._tunnelv-006.jpg" alt="'Tunnel Vision 6'"></td>
            <td style="min-width:636px;"><img src="http://..._tunnelv-007.jpg" alt="'Tunnel Vision 7'"></td>
         </table>
      </div>
   </body>
</html>

Upvotes: 0

Views: 58

Answers (1)

Kailash Gajara
Kailash Gajara

Reputation: 63

What are you trying to achieve? Scrollable table responsive doesn't say much. For responsive websites, all tables should auto-convert to list view.

You can write CSS as:

display: grid; grid-template-columns: 1em 1em 5ft 1fr 1fr 1fr ...

The number of columns specified with grid-template-columns should be same as the number of top-level divs.

Refer to the article here for easy setup: https://www.freecodecamp.org/news/https-medium-com-nakayama-shingo-creating-responsive-tables-with-pure-css-using-the-grid-layout-module-8e0ea8f03e83/

Upvotes: 0

Related Questions