JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel">
<div class="panel-heading"> <span class="panel-title"><i class="icon-user"></i> Training Team</span><button type="button" name="addProjectMember" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Project Member</button></div>
<div name="trainingTeamBody" style="display:none;" class="panel-body">
<span name="teamError"><br><div class="alert alert-warning"><center>No Project Members Assigned</center></div></span>
<table name="teamTable" class="table table-hover borderless" style="display: none;">
<thead>
<tr>
<th><small>Member</small></th>
<th><small>Role</small></th>
<th><small>Supervisor</small></th>
<th><small>Date Assigned</small></th>
<th><small>Who Assigned</small></th>
<th><small>Action</small></th>
</tr>
</thead>
<tbody name="teamTableResults"></tbody>
</table>
</div>
</div>
CSS
.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th {
border: 0 !important;
}
.panel {
border: 0 !important;
}
.table > thead > tr > th, .table > thead > tr > td {
border: 0 !important;
}
panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}