JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div fixed-first-column style="width:400px; margin:10px">
    <table class="table table-condensed table-striped">
        <thead>
        <tr>
            <th></th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th><div>Row 1<div></th>
            <th>asd asd fa sdf</th>
            <th>kha kjah sd aiusdf</th>
            <th>adf aiusdh a dkfj</th>
            <th>iuhf anksdc n,zvxc</th>
            <th>asdf azsdf sdfg fdg</th>
            <th>asdf asdfggf</th>
        </tr>
        <tr>
            <td><div>Row 2<div></td>
            <td>asd asd fa sdf</td>
            <td>kha kjah sd aiusdf</td>
            <td>adf aiusdh a dkfj</td>
            <td>iuhf anksdc n,zvxc</td>
            <td>asdf azsdf sdfg fdg</td>
            <td>asdf asdfggf</td>            
        </tr>
        <tr>
            <td><div>Row 3<div></td>
            <td>asd asd fa sdf</td>
            <td>kha kjah sd aiusdf</td>
            <td>adf aiusdh a dkfj</td>
            <td>iuhf anksdc n,zvxc</td>
            <td>asdf azsdf sdfg fdg</td>
            <td>asdf asdfggf</td>
        </tr>
        <tr>
            <td><div>Row 4<div></td>
            <td>asd asd fa sdf</td>
            <td>kha kjah sd aiusdf</td>
            <td>adf aiusdh a dkfj</td>
            <td>iuhf anksdc n,zvxc</td>
            <td>asdf azsdf sdfg fdg</td>
            <td>asdf asdfggf</td>
        </tr>
        <tr>
            <td><div>Row 5<div></td>
            <td>asd asd fa sdf</td>
            <td>kha kjah sd aiusdf</td>
            <td>adf aiusdh a dkfj</td>
            <td>iuhf anksdc n,zvxc</td>
            <td>asdf...

CSS

[fixed-first-column] {position:relative}
[fixed-first-column]>.table-responsive {margin-left:80px;}
[fixed-first-column]>.table-responsive .table {}

[fixed-first-column]>.table-responsive .table>thead>tr>td:first-child,
[fixed-first-column]>.table-responsive .table>tbody>tr>td:first-child,
[fixed-first-column]>.table-responsive .table>thead>tr>th:first-child,
[fixed-first-column]>.table-responsive .table>tbody>tr>th:first-child {
    position: absolute;
    min-width: 80px;
    width: 80px;
    border-right: 1px solid #ddd !important;
    border-bottom:1px solid #f5f5f5 !important;
	left:0;
	top:auto;
	padding-top:0 !important;
	padding-bottom:0 !important;
}

[fixed-first-column] > .table-responsive .table > thead > tr > td:first-child > div,
[fixed-first-column] > .table-responsive .table > tbody > tr > td:first-child > div,
[fixed-first-column] > .table-responsive .table > thead > tr > th:first-child > div,
[fixed-first-column] > .table-responsive .table > tbody > tr > th:first-child > div {
	padding-top: 5px;
	padding-bottom: 5px;
	position:relative;
}

[fixed-first-column] td {
    min-width:150px; /* default width */
	max-width:300px;
}

JavaScript

/*
This directive will fix the first column in place and will use `overflow-x:auto` for the subsequent columns.

Example use:
 
```
<div fixed-first-column>
	<table class="table">
		<tbody>
			<tr>
				<td><div>Row 1</div></td>
				<td>Value 1</td>
				<td>Value 2</td>
			</tr>
			<tr>
				<td><div>Row 2</div></td>
				<td>Value 1</td>
				<td>Value 2</td>
			</tr>
		</tbody>
	</table>
</div>
```
 */
angular.module("app", []).directive("fixedFirstColumn", [function () {
	return {
		restrict: "A",
		template: "<div class='table-responsive'><div ng-transclude></div></div>",
		transclude: true,
		link: function ($scope, $element) {
			var interval = setInterval(function () {
				var tr = $element.find("tr");

				angular.forEach(tr, function (i) {
					var columns = angular.element(i).children();

					if (columns.length < 1) {
						// Row with no columns? Ignore it.
						return;
					}

					var column0 = angular.element(columns[0]).children()[0] || columns[0];
					var column1 = columns[1];

					// Calculate heights of each <td>.
					var height0 = (column0).offsetHeight;
					var height1 = column1 ? column1.offsetHeight : 0;

					// Calculate final height.
					var height = Math.max(height0, height1);

					// Set heights of <td> and <tr>.
					columns[0].style.height = height + "px";
					i.style.height = height + "px";

					if (column1) {
						column1.style.height = height + "px";
					}
					
					// If <td> heights have stabilized.
					if (height0 !== 0 && height0 === height1) {
						clearInterval(interval);
					}
				});
			}, 1000);
		}
	};
}]);