JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th class="col-md-4">Organization:</th>
      <th class="col-md-4">City:</th>
      <th class="col-md-2">From:</th>
      <th class="col-md-2">To:</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="name in getdrugnameNewArray">
      <td>Stackoverflow</td>
      <td>2001</td>
      <td>2009</td>
      <td><input type="text" placeholder="2016"></td>
    </tr>
  </tbody>
</table>

CSS

table td {
  position: relative;
}

table td input {
  position: absolute;
  display: block;
  top:0;
  left:0;
  margin: 0;
  height: 100% !important;
  width: 100%;
  border-radius: 0 !important;
  border: none;
  padding: 10px;
  box-sizing: border-box;
}

JavaScript

// bootstrap 3.3.6
// jquery 2.2.1
// fontawesome 4.5.0