Forked from Daan Schaeffer's Pen RWKqoR.
Forked from Daan Schaeffer's Pen RWKqoR.
Forked from Daan Schaeffer's Pen RWKqoR.
Created
October 1, 2015 09:28
-
-
Save kaspereden/33e0a0924d18c7bf1c80 to your computer and use it in GitHub Desktop.
jbyQQQ
This file contains hidden or 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
| <div class="table-container"> | |
| <div class="table-responsive"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th> | |
| Front-end | |
| <small>een subtekst</small> | |
| </th> | |
| <th>Back-end</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Ontwikkel tool</td> | |
| <td>WebStormasdasdjkadaskdaskndaskdasmdanskdaskdmasndkasmdasndk</td> | |
| <td>IntelliJ</td> | |
| </tr> | |
| <tr> | |
| <td>Taal</td> | |
| <td>JavaScript</td> | |
| <td>Java</td> | |
| </tr> | |
| <tr> | |
| <td>Build tool</td> | |
| <td>Grunt</td> | |
| <td>Maven</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="shadow shadow-left"></div> | |
| <div class="shadow shadow-right"></div> | |
| </div> |
This file contains hidden or 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
| .table-container { | |
| position: relative; | |
| width: 100%; | |
| overflow-x: hidden; | |
| overflow-y: none; | |
| } | |
| .table { | |
| display: inline-block; | |
| position: relative; | |
| width: 100%; | |
| margin: 0; | |
| margin-right: 10px; | |
| margin-left: 10px; | |
| } | |
| .table:before { | |
| content: " "; | |
| display: inline-block; | |
| position: absolute; | |
| top: 0; | |
| left: -10px; | |
| background-color: white; | |
| width: 10px; | |
| bottom:0; | |
| z-index: 2; | |
| } | |
| .table:after { | |
| content: " "; | |
| display: inline-block; | |
| position: absolute; | |
| top: 0; | |
| right: -10px; | |
| background-color: white; | |
| width: 10px; | |
| bottom:0; | |
| z-index: 2; | |
| } | |
| .shadow { | |
| height: 100%; | |
| width: 10px; | |
| top: 0; | |
| bottom: 0; | |
| position: absolute; | |
| box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75); | |
| background-color: cyan; | |
| z-index: 1; | |
| } | |
| .shadow-left { | |
| left: -11px; | |
| /* display: none; */ | |
| } | |
| .shadow-right { | |
| right: -11px; | |
| /* right: 0; */ | |
| } | |
| .table-responsive { | |
| overflow-x: auto; | |
| overflow-y: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment