Flex scrolling tbody

Developer
Orion Drummond
Size
3,112 Kb
Views
32,384
  1. Flex scrolling tbody Previews
  2. Flex scrolling tbody HTML Codes
  3. Flex scrolling tbody CSS Codes

How do I make an flex scrolling tbody?

What is a flex scrolling tbody? How do you make a flex scrolling tbody? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.

Flex scrolling tbody Previews
IQ Test

Flex scrolling tbody - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex scrolling tbody</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-size: 4em; font-family: 'Source Sans Pro', 'sans-serif';
}
table { background-color: rgba(192, 192, 192, 0.5); display: flex; flex-flow: column;
}
table thead,
table tbody,
table tr,
table th,
table td { margin: 0; padding: 0;
}
table tr { display: flex; flex-flow: row; flex: 1; margin: 0; padding: 0;
}
table th,
table td { box-shadow: 0 0 1px; padding: 1ex 1em; box-sizing: border-box;
}
table thead { display: flex; flex-flow: row; justify-content: stretch; background-color: rgba(192, 192, 192, 0.5);
}
table thead th { flex: 1; font-weight: 600;
}
table thead th:first-child { flex: 2; flex-basis: 33.33%; text-align: left;
}
table tbody { display: block; overflow-y: auto; max-height: 100vh; width: 100%;
}
table tbody td { flex: 1; font-weight: 200;
}
table tbody td:first-child { flex: 2; flex-basis: 33.33%; text-align: left;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<html> <body> <table> <thead> <tr> <th>Features</th> <th>1.0</th> <th>1.1</th> <th>2.0</th> </tr> </thead> <tbody> <tr> <td>f 1</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 2</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 3</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 4</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 5</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 6</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 7</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 8</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 9</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 10</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 11</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>f 12</td> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> </body>
</html>
</body>
</html>

Flex scrolling tbody - Script Codes CSS Codes

html { font-size: 4em; font-family: 'Source Sans Pro', 'sans-serif';
}
table { background-color: rgba(192, 192, 192, 0.5); display: flex; flex-flow: column;
}
table thead,
table tbody,
table tr,
table th,
table td { margin: 0; padding: 0;
}
table tr { display: flex; flex-flow: row; flex: 1; margin: 0; padding: 0;
}
table th,
table td { box-shadow: 0 0 1px; padding: 1ex 1em; box-sizing: border-box;
}
table thead { display: flex; flex-flow: row; justify-content: stretch; background-color: rgba(192, 192, 192, 0.5);
}
table thead th { flex: 1; font-weight: 600;
}
table thead th:first-child { flex: 2; flex-basis: 33.33%; text-align: left;
}
table tbody { display: block; overflow-y: auto; max-height: 100vh; width: 100%;
}
table tbody td { flex: 1; font-weight: 200;
}
table tbody td:first-child { flex: 2; flex-basis: 33.33%; text-align: left;
}
Flex scrolling tbody - Script Codes
Flex scrolling tbody - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 3,112 Kb
Views 32,384
Do you need developer help for Flex scrolling tbody?

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
Neon wallpaper
A Pen by Orion Drummond
Hash navigation pattern
Warp scaffold
Image based blurry background
Seltzer samples
Studded wallpaper
Aspect-oriented tabs
Menu toggle with unicode icons
Conditional compiler test
Create amazing art & images 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!