{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzUwNzEyODY4LCJpYXQiOjE3NTA3MDkyNjgsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.RPMSxSIXUNMzQldJHKMOjfEFyuluxNI3I65DTloCJA2l5HZG1Z9NpeawpVJwMilpNogsOiauF_9yJqifoyGPDiMMvMKQJ-4NdPbQ9HRdOPPkyCSosVNW8CQBW-WeECKe0vQCH1mAe8IcfFkSdEP6EjyIERBt2Y-zBq9550oUNmYqebBooDiq8MvXxbbmEBIlWO3dvRk9mTMD7solAIxoTFxiKHVFNTRqvbLsr7WZJ2aWKVK6jFONYTXm08RI5cfev8QB7WxwIe8hEwiCJFCTN0lsTz61O7E3zLXQLSITp1qYvFrJi3NhK9TpYXpRyVrqqGpZyA-6so5fjRdWpXZoNA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":81320058,\"user_id\":74047,\"html\":\"<h1>Scroll Middle Section Sideways<\\/h1>\\n<div class=\\\"table-scroll-wrap\\\">\\n <div id=\\\"table-scroll\\\" class=\\\"table-scroll\\\">\\n <table id=\\\"main-table\\\" class=\\\"main-table\\\">\\n <thead>\\n <tr>\\n <th class=\\\"col col1\\\" scope=\\\"col\\\">Header 1<\\/th>\\n <th class=\\\"col col2\\\" scope=\\\"col\\\">Header 2<\\/th>\\n <th class=\\\"col col3\\\" scope=\\\"col\\\">Header 3 <\\/th>\\n <th scope=\\\"col\\\">Header 4 <\\/th>\\n <th scope=\\\"col\\\">Header 5<\\/th>\\n <th scope=\\\"col\\\">Header 6<\\/th>\\n <th scope=\\\"col\\\">Header 7<\\/th>\\n <th scope=\\\"col\\\">Header 8<\\/th>\\n <th scope=\\\"col\\\">Header 9<\\/th>\\n <th scope=\\\"col\\\">Header 10<\\/th>\\n <th scope=\\\"col\\\">Header 11<\\/th>\\n <th scope=\\\"col\\\">Header 12<\\/th>\\n <th scope=\\\"col\\\">Header 13<\\/th>\\n <th scope=\\\"col\\\">Header 14<\\/th>\\n <th scope=\\\"col\\\">Header 15<\\/th>\\n <th class=\\\"col collast\\\" scope=\\\"col\\\">Header 16<\\/th>\\n <\\/tr>\\n <\\/thead>\\n <tbody>\\n <tr>\\n <td class=\\\"col col1\\\">1 First top Column<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4Cellcontentwithmore content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9Cellcontentwith more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n <tr>\\n <td class=\\\"col col1\\\">1 Last FirstColumn<\\/td>\\n <td class=\\\"col col2\\\">2 Cell content <\\/td>\\n <td class=\\\"col col3\\\">3 <a href=\\\"#\\\">Cell content longer<\\/a><\\/td>\\n <td>4 Cell content with more content and more content <\\/td>\\n <td>5 Cell content<\\/td>\\n <td>6 Cell content<\\/td>\\n <td>7 Cell content<\\/td>\\n <td>8 Cell content<\\/td>\\n <td>9 Cell content with more content and more <\\/td>\\n <td>10 Cell content<\\/td>\\n <td>11 Cell content<\\/td>\\n <td>12 Cell content with more content <\\/td>\\n <td>13 Cell content<\\/td>\\n <td>14 Cell content<\\/td>\\n <td>15 Cell content<\\/td>\\n <td class=\\\"col collast\\\">16 Cell content<\\/td>\\n <\\/tr>\\n\\n <\\/tbody>\\n <tfoot>\\n <tr>\\n <td class=\\\"col col1\\\">Footer 1<\\/td>\\n <td class=\\\"col col2\\\">Footer 2<\\/td>\\n <td class=\\\"col col3\\\">Footer 3<\\/td>\\n <td>Footer 4<\\/td>\\n <td>Footer 5<\\/td>\\n <td>Footer 6<\\/td>\\n <td>Footer 7<\\/td>\\n <td>Footer 8<\\/td>\\n <td>Footer 9<\\/td>\\n <td>Footer 10<\\/td>\\n <td>Footer 11<\\/td>\\n <td>Footer 12<\\/td>\\n <td>Footer 13<\\/td>\\n <td>Footer 14<\\/td>\\n <td>Footer 15<\\/td>\\n <td class=\\\"col collast\\\">Footer 16<\\/td>\\n <\\/tr>\\n <\\/tfoot>\\n <\\/table>\\n <\\/div>\\n<\\/div>\",\"css\":\":root {\\n --cell-width: 100px; \\n --padding:10px;\\n --padding-borders:21px;\\/* 2 * 10 + 2 * 1 *\\/\\n}\\nhtml {\\n box-sizing: border-box;\\n}\\n*,\\n*:before,\\n*:after {\\n box-sizing: inherit;\\n}\\nbody {\\n display: flex;\\n flex-direction: column;\\n min-height: 100vh;\\n}\\nh1 {\\n margin: auto 0 0;\\n text-align: center;\\n font-size: 1.5rem;\\n}\\n.table-scroll-wrap {\\n position: relative;\\n margin: 0 auto auto;\\n width: 85%;\\n max-width: 2000px;\\n height: 70vh; \\/* for vertical scrolling if required*\\/\\n}\\n.table-scroll {\\n position: relative;\\n width: 100%;\\n z-index: 1;\\n margin: 0;\\n overflow: auto;\\n height: 100%; \\/* for vertical scrolling if required*\\/\\n}\\n.table-scroll table {\\n width: 100%;\\n margin: 0;\\n table-layout: auto;\\n border-collapse: separate;\\n border-spacing: 0;\\n word-wrap: break-word;\\n}\\n.table-wrap {\\n position: relative;\\n}\\n.table-scroll th,\\n.table-scroll td {\\n padding: 5px var(--padding);\\n background: #fff;\\n vertical-align: top;\\n width: auto;\\n min-width:100px;\\n word-break:break-word;\\n}\\n.table-scroll td{\\n border-right:1px solid #000;\\n border-bottom:1px solid #000;\\n}\\n.table-scroll th{border-right:1px solid #666;}\\n\\n.table-scroll th.col1:before,\\n.table-scroll th.col2:before,\\n.table-scroll th.col3:before{\\n \\/* this forces cell width not to shrink in auto algorithm*\\/\\n content:\\\"\\\";\\n display:block;\\n height:0px;\\n width: var(--cell-width);\\n}\\n.table-scroll th.col1,\\n.table-scroll th.col2,\\n.table-scroll th.col3{\\n width: var(--cell-width);\\n}\\n\\n.table-scroll thead th {\\n background: #333;\\n color: #fff;\\n position: -webkit-sticky;\\n position: sticky;\\n top: 0;\\n white-space:nowrap;\\n}\\n\\/* safari and ios need the tfoot itself to be position:sticky also *\\/\\n.table-scroll tfoot,\\n.table-scroll tfoot th,\\n.table-scroll tfoot td {\\n position: -webkit-sticky; \\/* this is needed for ios*\\/\\n position: sticky;\\n bottom: 0;\\n background: #666;\\n color: #fff;\\n z-index: 4;\\n}\\n\\na:focus {\\n background: red;\\n} \\/* testing links*\\/\\n\\n.col {\\n position: -webkit-sticky;\\n position: sticky;\\n left: 0;\\n z-index: 2;\\n}\\n\\ntbody .col {\\n background: #ccc;\\n}\\n.col2 {\\n left: calc(var(--cell-width) + var(--padding-borders));\\n}\\n.col3 {\\n left: calc((var(--cell-width) + var(--padding-borders)) * 2);\\n}\\n#table-scroll .collast {\\n left: auto;\\n right: 0;\\n border-right:none;\\n}\\nthead .col,\\n.table-scroll tfoot .col {\\n z-index: 6;\\n}\\n@media screen and (max-width: 1050px) {\\n .table-scroll-wrap {\\n width: 100%;\\n }\\n}\\n\\n\\/* for small screen I would remove sticky side columns and just let table scroll sideways.*\\/\\n\\n\\/* something roughly like this *\\/\\n@media screen and (max-width: 900px) {\\n .table-scroll table {\\n table-layout: auto;\\n }\\n .table-scroll tbody .col {\\n position: static;\\n }\\n .table-scroll thead .col,\\n .table-scroll tfoot .col {\\n left: auto;\\n right: auto;\\n }\\n .table-scroll tbody td.col {\\n background: #fff;\\n }\\n .table-scroll th,\\n .table-scroll td {\\n min-width: 150px;\\n }\\n .table-scroll-wrap:after,\\n .table-scroll-wrap:before{\\n content: \\\"\\\";\\n position: absolute;\\n right: 0;\\n top: 0;\\n bottom: 0;\\n background: linear-gradient(to left, #666, transparent);\\n z-index: 999;\\n width: 45px;\\n pointer-events: none;\\n }\\n .table-scroll-wrap:before{\\n right:auto;\\n left:0;\\n background: linear-gradient(to right, #666, transparent)\\n }\\n}\\n\",\"js\":\"\\n\\/* see version v5 with forminimal js example\\n\\nhttps:\\/\\/codepen.io\\/paulobrien\\/pen\\/oNGwvKv\\n\\n*\\/\\n\\n\\/* Full js example here:\\n\\nhttps:\\/\\/codepen.io\\/paulobrien\\/pen\\/emmVXXQ\\/66a6090b1cadaa164ee323e1654d1464\\n\\n*\\/\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2025-05-02T10:10:24.686Z\",\"updated_at\":\"2025-05-06T15:20:57.910Z\",\"title\":\"Table with fixed header, footer and some columns using position:sticky v6\",\"description\":\"A simple way to have fixed headers and footers on long scrollable tables without JS and without harming older browsers.\\n\\n\",\"slug_hash\":\"bNNLZNp\",\"head\":\"<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\",\"private\":false,\"slug_hash_private\":\"a0f9f9addf8a4243f294220daad84b51\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":23272683,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":3,\"views_count\":27,\"pick_visible_at\":null,\"cpid\":\"01969079-d12e-72e6-9f2b-f9897a8fed5e\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"bNNLZNp\"}"}