Table scroll, Fixed headers

Vertical and horizontal scroll table with re-sizable columns and sticky left and top headers

HTML

<div class="table-scroll">
    <table class="fixed-headers">
        <thead>
            <tr><th>headers</th><th>header a</th><th>header b</th><th>header c</th><th>header d</th></tr>
        </thead>
        <tbody>
            <tr><th>header 1</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 2</th><td>1</td><td>2_content_content_content_content_content_content</td><td>3</td><td>4</td></tr>
            <tr><th>header 3</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 4</th><td>1</td><td>2</td><td>3<br>3<br>3</td><td>4</td></tr>
            <tr><th>header 5</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 6</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 7</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 8</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 9</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 10</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 11</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 12</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        </tbody>
    </table>
</div>

CSS

.table-scroll {
  display: inline-block;
  position: relative;
	outline: 1px solid #000;
  outline-offset: -1px;
  max-width: 100%;
	max-height: 90vh;
	overflow: auto;
}
.fixed-headers {
	border: 1px solid #000;
  border-width: 1px 0 0 1px;
	border-collapse: separate;
	border-spacing: 0;
	width: 1000px;
}
.fixed-headers th, 
.fixed-headers td {
	border: 1px solid #000;
  border-width: 0 1px 1px 0;
	padding: 5px 10px;
}
.fixed-headers th {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  left: 0;
  background: #ffc;
	text-transform: capitalize;
}
.fixed-headers thead th { 
  z-index: 2;
	top: 0;
  left: auto;
  resize: horizontal;
  overflow: auto;
	background: #cff;
  vertical-align: baseline;
}
.fixed-headers thead th:first-child {
  z-index: 3;
  left: 0;
}