JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="breadcrumb">
        <li> <a href="#">Home</a></li>
        <li> <a href="#">Forms</a></li>
        <li class="active">Edit</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-9">
      <div class="scrolling outer">
        <div class="inner">
          <table class="table table-striped table-hover table-condensed">
            <tr>
              <th>Date:</th>
              <td>Content One</td>
              <td>Longer Content Two</td>
              <td>Third Content Contains More</td>
              <td>Short Four</td>
              <td>Standard Five</td>
              <td>Who's Counting</td>
              <td>Longer Content Two</td>
              <td>Third Content Contains More</td>
              <td>Short Four</td>
              <td>Standard Five</td>
              <td>Standard Six</td>
            </tr>
            <tr>
              <th><input type="text" class="form-control" value="03-03-2008"></th>
              <td><input type="text" class="form-control" value="22"></td>
              <td><input type="text" class="form-control" value="22"></td>
              <td><input type="text" class="form-control" value="22"></td>
              <td><input type="text" class="form-control" value="22"></td>
              <td><input type="text" class="form-control" value="22"></td>
              <td><input type="text" class="form-control" value="22"></td>
              <td><input type="text" class="form-control" value="26"></td>
              <td><input type="text" class="form-control" value="26"></td>
              <td><input type="text" class="form-control" value="26"></td>
              <td><input type="text" class="form-control" value="26"></td>
              <td><input type="text" class="form-control" value="26"></td>
           ...

CSS

.scrolling table {
    table-layout: inherit;
 *margin-left: -100px;/*ie7*/
}
.scrolling td, th {
    vertical-align: top;
	padding: 10px;
	min-width: 100px;
}
.scrolling th {
	position: absolute;
 *position: relative; /*ie7*/
	left: 0;
	width: 120px;
}
.outer {
	position: relative
}
.inner {
	overflow-x: auto;
	overflow-y: visible;
	margin-left: 120px;
}