Last active
June 24, 2022 14:49
-
-
Save florianpasteur/9ef129f4854673829125ac9886469aa1 to your computer and use it in GitHub Desktop.
Bootstrap table flexbox only. Based on: https://jsfiddle.net/lowrey/yc4xzx4q/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> | |
| <title>Bootstrap 5 Flexbox table</title> | |
| <style> | |
| /* Css not used, as reference only */ | |
| .table { | |
| display: flex; | |
| flex-flow: column nowrap; | |
| font-size: .8rem; | |
| margin: 0.5rem; | |
| line-height: 1.5; | |
| border-bottom: 1px solid #d0d0d0; | |
| flex: 1 1 auto; | |
| } | |
| .th { | |
| display: none; | |
| font-weight: 700; | |
| background-color: #f2f2f2; | |
| } | |
| .th > .td { | |
| white-space: normal; | |
| justify-content: center; | |
| } | |
| .tr { | |
| width: 100%; | |
| display: flex; | |
| flex-flow: row nowrap; | |
| } | |
| .tr:nth-of-type(even) { | |
| background-color: #f2f2f2; | |
| } | |
| .tr:nth-of-type(odd) { | |
| background-color: #ffffff; | |
| } | |
| .td { | |
| display: flex; | |
| flex-flow: row nowrap; | |
| flex-grow: 1; | |
| flex-basis: 0; | |
| padding: 0.5em; | |
| word-break: break-word; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| min-width: 0px; | |
| white-space: nowrap; | |
| border-bottom: 1px solid #d0d0d0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="d-flex flex-column flex-nowrap flex-fill"> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-2" style="flex-basis: 0;"> | |
| Name | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" > | |
| Items Bought | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0"> | |
| Clicked | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0"> | |
| Duration | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0"> | |
| Lifetime Total | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0"> | |
| Total | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-10"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-2"> | |
| <b>Total</b> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <b>4102</b> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <b>2914</b> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <b>1341</b> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <b>$12,118,329.15</b> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <b>$4,036,930.16</b> | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="flex-grow: 2;"> | |
| <span><a href="javascript:void(0)">Andrew Jackman</a></span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>41</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>30</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>27</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$176.15</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$14.94</span> | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="flex-grow: 2;"> | |
| <span><a href="javascript:void(0)">Oliver Ogden</a></span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>9</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>3</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>1</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$29,403.09</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$1,385.58</span> | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="flex-grow: 2;"> | |
| <span><a href="javascript:void(0)">Basil Ullon</a></span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>750</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>535</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>707</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$795,170.40</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$341,946.34</span> | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="flex-grow: 2;"> | |
| <span><a href="javascript:void(0)">Frank Davis</a></span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>2</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>1</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>0</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$65.10</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$41.12</span> | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="flex-grow: 2;"> | |
| <span><a href="javascript:void(0)">Edward Ellis</a></span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>80</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>27</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>17</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$685,372.01</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$40,422.95</span> | |
| </div> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap w-100"> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="flex-grow: 2;"> | |
| <span><a href="javascript:void(0)">Keyrene Byrne</a></span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>295</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>211</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: center;"> | |
| <span>369</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$1,844,327.00</span> | |
| </div> | |
| <div class="d-flex flex-row flex-nowrap text-break overflow-hidden flex-grow-1" style="flex-basis: 0" | |
| style="justify-content: flex-end;"> | |
| <span>$472,188.44</span> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment