Flexbox based html table
This template I use in many my project where I need to show table data:
Row 1, Cell 1
Row 1, Cell 2
Row 1, Cell 3
Row 1, Cell 4
Row 1, Cell 5
Row 2, Cell 1
Row 2, Cell 2
Row 2, Cell 3
Row 2, Cell 4
Row 2, Cell 5
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8">
5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
6: <title>Flexbox Table</title>
7: <style>
8: .flex-table {
9: display: flex;
10: flex-wrap: wrap; /* Allow wrapping to next row */
11: width: 100%; /* Or a fixed width if you prefer */
12: }
13: .flex-row {
14: display: flex;
15: width: 100%;
16: }
17: .flex-cell {
18: flex: 1; /* Distribute available space equally */
19: padding: 10px; /* Add some padding */
20: border: 1px solid #ccc; /* Add borders */
21: box-sizing: border-box; /* Include padding in width calculation */
22: text-align: center; /* Center content within cells */
23: }
24: /* Example media query for larger screens */
25: @media (min-width: 1200px) { /* Adjust as needed */
26: .flex-table {
27: font-size: 1.2em; /* Increase font size */
28: }
29: }
30: </style>
31: </head>
32: <body>
33: <div class="flex-table">
34: <div class="flex-row">
35: <div class="flex-cell">Row 1, Cell 1</div>
36: <div class="flex-cell">Row 1, Cell 2</div>
37: <div class="flex-cell">Row 1, Cell 3</div>
38: <div class="flex-cell">Row 1, Cell 4</div>
39: <div class="flex-cell">Row 1, Cell 5</div>
40: </div>
41: <div class="flex-row">
42: <div class="flex-cell">Row 2, Cell 1</div>
43: <div class="flex-cell">Row 2, Cell 2</div>
44: <div class="flex-cell">Row 2, Cell 3</div>
45: <div class="flex-cell">Row 2, Cell 4</div>
46: <div class="flex-cell">Row 2, Cell 5</div>
47: </div>
48: </div>
49: </body>
50: </html>
Css context:
Comments (
)
)
Link to this page:
http://www.vb-net.com/FlexBoxTable/Index.htm
|
|