Flexbox scrollable table body

Developer
Orion Drummond
Size
2,744 Kb
Views
32,384
  1. Flexbox scrollable table body Previews
  2. Flexbox scrollable table body HTML Codes
  3. Flexbox scrollable table body CSS Codes

How do I make an flexbox scrollable table body?

What is a flexbox scrollable table body? How do you make a flexbox scrollable table body? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.

Flexbox scrollable table body Previews
IQ Test

Flexbox scrollable table body - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox scrollable table body</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Using Flexbox on table to get scrollable surfaces.</p>
<table> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> </tr> </thead> <tbody> <tr> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> </tr> <tr> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> </tr> <tr> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> </tr> <tr> <td>cell 4-1</td> <td>cell 4-2</td> <td>cell 4-3</td> </tr> <tr> <td>cell 5-1</td> <td>cell 5-2</td> <td>cell 5-3</td> </tr> <tr> <td>cell 6-1</td> <td>cell 6-2</td> <td>cell 6-3</td> </tr> <tr> <td>cell 7-1</td> <td>cell 7-2</td> <td>cell 7-3</td> </tr> <tr> <td>cell 8-1</td> <td>cell 8-2</td> <td>cell 8-3</td> </tr> <tr> <td>cell 9-1</td> <td>cell 9-2</td> <td>cell 9-3</td> </tr> <tr> <td>cell 10-1</td> <td>cell 10-2</td> <td>cell 10-3</td> </tr> <tr> <td>cell 11-1</td> <td>cell 11-2</td> <td>cell 11-3</td> </tr> <tr> <td>cell 12-1</td> <td>cell 12-2</td> <td>cell 12-3</td> </tr> <tr> <td>cell 13-1</td> <td>cell 13-2</td> <td>cell 13-3</td> </tr> <tr> <td>cell 14-1</td> <td>cell 14-2</td> <td>cell 14-3</td> </tr> <tr> <td>cell 15-1</td> <td>cell 15-2</td> <td>cell 15-3</td> </tr> <tr> <td>cell 16-1</td> <td>cell 16-2</td> <td>cell 16-3</td> </tr> <tr> <td>cell 17-1</td> <td>cell 17-2</td> <td>cell 17-3</td> </tr> <tr> <td>cell 18-1</td> <td>cell 18-2</td> <td>cell 18-3</td> </tr> <tr> <td>cell 19-1</td> <td>cell 19-2</td> <td>cell 19-3</td> </tr> <tr> <td>cell 20-1</td> <td>cell 20-2</td> <td>cell 20-3</td> </tr> <tr> <td>cell 21-1</td> <td>cell 21-2</td> <td>cell 21-3</td> </tr> <tr> <td>cell 22-1</td> <td>cell 22-2</td> <td>cell 22-3</td> </tr> <tr> <td>cell 23-1</td> <td>cell 23-2</td> <td>cell 23-3</td> </tr> <tr> <td>cell 24-1</td> <td>cell 24-2</td> <td>cell 24-3</td> </tr> <tr> <td>cell 25-1</td> <td>cell 25-2</td> <td>cell 25-3</td> </tr> <tr> <td>cell 26-1</td> <td>cell 26-2</td> <td>cell 26-3</td> </tr> <tr> <td>cell 27-1</td> <td>cell 27-2</td> <td>cell 27-3</td> </tr> <tr> <td>cell 28-1</td> <td>cell 28-2</td> <td>cell 28-3</td> </tr> <tr> <td>cell 29-1</td> <td>cell 29-2</td> <td>cell 29-3</td> </tr> <tr> <td>cell 30-1</td> <td>cell 30-2</td> <td>cell 30-3</td> </tr> </tbody> <tfoot> <tr> <td span='3'>foot</td> </tr> </tfoot>
</table>
<p>fun stuff</p>
</body>
</html>

Flexbox scrollable table body - Script Codes CSS Codes

body { padding: 3em; background-color: white;
}
table { width: 100%; overflow-x: auto; height: 100vh;
}
table thead { min-height: 3em;
}
table th,
table td { padding: 1em; box-sizing: border-box; text-align: center; box-shadow: 0 0 1.5px -1px; -webkit-box-flex: 1; -ms-flex: 1 0 10em; flex: 1 0 10em;
}
table,
table thead,
table tbody,
table tfoot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
table tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0;
}
@media screen and (min-aspect-ratio: 1/1) { table tbody { overflow-y: auto; }
}
Flexbox scrollable table body - Script Codes
Flexbox scrollable table body - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 2,744 Kb
Views 32,384
Do you need developer help for Flexbox scrollable table body?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Orion Drummond (tappily) Script Codes
Name
3rd try
Warp scaffold
CSS Prompt
Responsive Background Image Loading
Blue folds wallpaper
Seltzer samples
Neon wallpaper
Studded wallpaper
A Pen by Orion Drummond
Image based blurry background
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!