JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default table-container">
  <div class="panel-heading">Users</div>
<div class="panel-body">
  <table class="table table-striped table-bordered" id="dataTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
</div>

CSS

.table-container {
  margin: 10px;
}
.table-container .panel-heading {
  font-weight: bold;
}
.table-container .panel-body {
  padding: 0;
}
.table-container table {
  margin-bottom: 0;
  border: none;
}
.table-container table tr:last-child td {
  border-bottom: none;
}
.table-container table tr th:first-child,
.table-container table tr td:first-child {
  border-left: none;
}
.table-container table tr th:last-child,
.table-container table tr td:last-child {
  border-right: none;
}

JavaScript

var root = 'https://jsonplaceholder.typicode.com';
var tableRow = '';
$.ajax({
  url: root + '/users',
  method: 'GET',
  success: function(data) {
  console.log(data);
    for (var i = 0; i < data.length; i++) {
      var tableRow = '<tr><td>' + data[i].name + '</td><td>' + data[i].email + '</td><td>' + data[i].address.city + '</td></tr>';
      $("#dataTable").find('tbody').append(tableRow);
    }
  },
  error: function() {
    var tableRow = '<tr><td colspan="3" class="text-center">There is no data to display</td></tr>';
  	$("#dataTable").find('tbody').append(tableRow);
  }
});