Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rudifa/astro-scroll-on-mobile
Demo the styling that makes a fixed-width html table and leths the user scroll it horizontall and vertically on a small mobile screen
https://github.com/rudifa/astro-scroll-on-mobile
Last synced: 4 days ago
JSON representation
Demo the styling that makes a fixed-width html table and leths the user scroll it horizontall and vertically on a small mobile screen
- Host: GitHub
- URL: https://github.com/rudifa/astro-scroll-on-mobile
- Owner: rudifa
- Created: 2024-11-13T20:57:23.000Z (6 days ago)
- Default Branch: main
- Last Pushed: 2024-11-13T21:12:24.000Z (6 days ago)
- Last Synced: 2024-11-13T22:20:41.359Z (6 days ago)
- Language: Astro
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Investigate a responsive astro page that scrolls horizontally on a narrow screen
## Dialog with Claude.ai
**RF**
could you create an astro demo where a page shows a html table about 1000 px wide; when running on a mobile device the table (and header and footer, etc) should not be squashed or molested but keep their integrity in a scrollable view
**Claude**
I'll create a demo of an Astro page with a responsive table layout that maintains its integrity on mobile devices through horizontal scrolling.
```astro
---
// src/pages/index.astro
---
Responsive Table Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
}
header {
background: #2563eb;
color: white;
padding: 1rem;
text-align: center;
}
footer {
background: #1e3a8a;
color: white;
padding: 1rem;
text-align: center;
}
main {
padding: 1rem;
/* Enable smooth scrolling for the table container */
-webkit-overflow-scrolling: touch;
}
.table-container {
width: 100%;
overflow-x: auto;
/* Add some visual indication of scrollability */
background:
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-attachment: local, local, scroll, scroll;
}
table {
width: 1000px;
border-collapse: collapse;
background: white;
}
th, td {
padding: 0.75rem;
border: 1px solid #e5e7eb;
text-align: left;
}
th {
background: #f3f4f6;
font-weight: 600;
}
tr:nth-child(even) {
background: #f9fafb;
}
/* Make sure the content is readable on mobile */
@media (max-width: 640px) {
body {
font-size: 14px;
}
}
Responsive Table Demo
ID
Product Name
Category
Description
Price
Stock
Last Updated
Status
{Array.from({ length: 10 }).map((_, i) => (
#{i + 1}
Product {i + 1}
Category {Math.floor(Math.random() * 5) + 1}
This is a detailed description for Product {i + 1} with extended text to demonstrate horizontal scrolling
${(Math.random() * 100).toFixed(2)}
{Math.floor(Math.random() * 100)}
{new Date().toLocaleDateString()}
{Math.random() > 0.5 ? 'Active' : 'Inactive'}
))}
© 2024 Responsive Table Demo
```
I've created an Astro page that implements a responsive table with the following features:
1. Fixed 1000px wide table that maintains its width on mobile
2. Smooth horizontal scrolling container
3. Visual scroll indicators (fade effect on the edges)
4. Sticky header and footer that remain in place
5. Clean, modern styling with alternating row colors
6. Touch-friendly scrolling with `-webkit-overflow-scrolling: touch`
7. Proper viewport meta tag to ensure correct mobile rendering
Key implementation details:
- The table is wrapped in a `.table-container` div that handles the horizontal scrolling
- CSS gradients create a subtle fade effect to indicate scrollable content
- The table maintains its 1000px width while the container adapts to the viewport
- The layout is optimized for mobile with slightly smaller font size
- Header and footer stay fixed while the table scrolls
To use this:
1. Create a new Astro project
2. Copy this code to your `src/pages/index.astro` file
3. Run the development server
The table will remain intact on mobile devices while allowing users to scroll horizontally to see all columns. Would you like me to adjust any aspects of the styling or add more interactive features?
## It works nicely
Tested with `astro dev --host` and scrolling on an iPhone 15.
## Next steps
**RF**
could you center the table horizontally when the browser page is wider than the table
**Claude**
I'll modify the CSS to center the table when the viewport is wider than 1000px.
```astro
---
---
Responsive Table Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
}
header {
background: #2563eb;
color: white;
padding: 1rem;
text-align: center;
}
footer {
background: #1e3a8a;
color: white;
padding: 1rem;
text-align: center;
}
main {
padding: 1rem;
/* Center the content horizontally */
display: flex;
justify-content: center;
/* Enable smooth scrolling for the table container */
-webkit-overflow-scrolling: touch;
}
.table-container {
/* Max width matches table width */
max-width: 1000px;
/* Allow container to shrink on mobile */
width: 100%;
overflow-x: auto;
/* Add some visual indication of scrollability */
background:
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-attachment: local, local, scroll, scroll;
}
table {
width: 1000px;
border-collapse: collapse;
background: white;
}
th, td {
padding: 0.75rem;
border: 1px solid #e5e7eb;
text-align: left;
}
th {
background: #f3f4f6;
font-weight: 600;
}
tr:nth-child(even) {
background: #f9fafb;
}
/* Make sure the content is readable on mobile */
@media (max-width: 640px) {
body {
font-size: 14px;
}
}
Responsive Table Demo
ID
Product Name
Category
Description
Price
Stock
Last Updated
Status
{Array.from({ length: 10 }).map((_, i) => (
#{i + 1}
Product {i + 1}
Category {Math.floor(Math.random() * 5) + 1}
This is a detailed description for Product {i + 1} with extended text to demonstrate horizontal scrolling
${(Math.random() * 100).toFixed(2)}
{Math.floor(Math.random() * 100)}
{new Date().toLocaleDateString()}
{Math.random() > 0.5 ? 'Active' : 'Inactive'}
))}
© 2024 Responsive Table Demo
```
Key changes made to center the table:
1. Added `display: flex` and `justify-content: center` to the `main` element to center its contents
2. Set `max-width: 1000px` on the `.table-container` to match the table width
3. Kept `width: 100%` on the container to ensure it still shrinks appropriately on mobile
Now the table will:
- Center horizontally when the viewport is wider than 1000px
- Take up full width (with scrolling) when the viewport is narrower
- Maintain all previous responsive features
Would you like me to adjust anything about the centering behavior or other aspects of the layout?
## It works nicely too
```
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 723c03c..7d91a1e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -39,11 +39,17 @@
main {
padding: 1rem;
+ /* Center the content horizontally */
+ display: flex;
+ justify-content: center;
/* Enable smooth scrolling for the table container */
-webkit-overflow-scrolling: touch;
}
.table-container {
+ /* Max width matches table width */
+ max-width: 1000px;
+ /* Allow container to shrink on mobile */
width: 100%;
overflow-x: auto;
/* Add some visual indication of scrollability */
```