jbyQQQ

index.html

<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>

jbyQQQ.markdown

jbyQQQ

Forked from Daan Schaeffer's Pen RWKqoR.

Forked from Daan Schaeffer's Pen RWKqoR.

Forked from Daan Schaeffer's Pen RWKqoR.

A Pen by Kasper on CodePen.

License.

style.css

.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;
}