HTML table fixed first column and horiziontal scroll

by Andreas Burg

HTML

<div id="outer">
  <div id="inner">
    <table>
      <thead>
        <tr class="tr_1">
          <th class="th_1">th 1 content</th>
          <th class="th_2">th 2 content</th>
          <th class="th_3">th 3 content</th>
          <th class="th_4">th 4 content</th>
          <th class="th_5">th 5 content</th>
          <th class="th_6">th 6 content</th>
          <th class="th_7">th 7 content</th>
          <th class="th_8">th 8 content</th>
        </tr>
      </thead>
      <tbody>
        <tr class="tr_2">
          <td class="td_1">td 1 content</td>
          <td class="td_2">td 2 content</td>
          <td class="td_3">td 3 content</td>
          <td class="td_4">td 4 content</td>
          <td class="td_5">td 5 content</td>
          <td class="td_6">td 6 content</td>
          <td class="td_7">td 7 content</td>
          <td class="td_8">td 8 content</td>
        </tr>
        <tr class="tr_3">
          <td class="td_1">td 1 content</td>
          <td class="td_2">td 2 content</td>
          <td class="td_3">td 3 content</td>
          <td class="td_4">td 4 content</td>
          <td class="td_5">td 5 content</td>
          <td class="td_6">td 6 content</td>
          <td class="td_7">td 7 content</td>
          <td class="td_8">td 8 content</td>
        </tr>
        <tr class="tr_4">
          <td class="td_1">td 1 content</td>
          <td class="td_2">td 2 content</td>
          <td class="td_3">td 3 content</td>
          <td class="td_4">td 4 content</td>
          <td class="td_5">td 5 content</td>
          <td class="td_6">td 6 content</td>
          <td class="td_7">td 7 content</td>
          <td class="td_8">td 8 content</td>
        </tr>
        <tr class="tr_5">
          <td class="td_1">td 1 content</td>
          <td class="td_2">td 2 content</td>
          <td class="td_3">td 3 content</td>
          <td class="td_4">td 4 content</td>
          <td class="td_5">td 5 content</td>
          <td class="td_6">td 6 content</td>
         ...

CSS

body {
	margin: 0;
	color: white;
}
* {
	background-color: rgba(39, 43, 53, .4);
}
#outer {
	max-width: 600px;
	margin: 0 auto;
	overflow: hidden;
	padding: 1rem;
}
#inner {
	overflow-x: scroll;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	padding: 0 1em;
	white-space: nowrap;
	line-height: 30px;
  border: 1px solid white;
  border-width: 0 1px 1px 0;
}
th {
	background-color: cornflowerblue;
	font-weight: normal;
}
.th_1, .td_1 {
	position: absolute;
	background-color: tomato;
	width: 86px;
}
.th_2, .td_2 {
	padding-left: calc(3em + 86px);
}