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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <br />
<div class="panel panel-default">
      <div class="panel-heading">
					<h3 class="panel-title">Panel 1 </h3>
					<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
				</div>
     <table class="table table-bordered table-hover specialCollapse">
      <thead>
        <tr>
          <th class="col-md-1"><small>ID</small></th>
          <th class="col-md-1"><small>Date</small></th>
          <th class="col-md-2"><small>Type</small></th>
          <th class="col-md-2"><small>Tool</small></th>
          <th class="col-md-5"><small>Issue</small></th>
          <th class="col-md-1"><small>Action</small></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><small>1234</small></td>
          <td><small>09/20/2015</small></td>
          <td><small>Permission</small></td>
          <td><small>HYD</small></td>
          <td><small>Need access for my team</small></td>
          <td><small>Button</small></td>
        </tr>
                <tr>
          <td><small>1234</small></td>
          <td><small>09/20/2015</small></td>
          <td><small>Permission</small></td>
          <td><small>HYD</small></td>
          <td><small>Need access for my team</small></td>
          <td><small>Button</small></td>
        </tr>
                <tr>
          <td><small>1234</small></td>
          <td><small>09/20/2015</small></td>
          <td><small>Permission</small></td>
          <td><small>HYD</small></td>
          <td><small>Need access for my team</small></td>
          <td><small>Button</small></td>
        </tr>
                <tr>
          <td><small>1234</small></td>
          <td><small>09/20/2015</small></td>
          <td><small>Permission</small></td>
         ...

CSS

.row{
    margin-top:40px;
    padding: 0 10px;
}

.clickable{
    cursor: pointer;   
}

.panel-heading span {
	margin-top: -20px;
	font-size: 15px;
}

.table > thead > tr > th{
    border-right: 1px solid #ddd;
    border-bottom:0;
}

.table > tbody > tr > td{
    border-right: 1px solid #ddd;
}

.table > thead > tr > th:last-of-type {
    border-right: 0px;
}

.table > tbody > tr > td:last-of-type {
    border-right: 0px;
}

.panel-body {
    padding: 0;
}
.panel-body > .table{margin-bottom:0px;}

JavaScript

$(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
	if(!$this.hasClass('panel-collapsed')) {
		$this.parents('.panel').find('.specialCollapse').slideUp();
		$this.addClass('panel-collapsed');
		$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
	} else {
		$this.parents('.panel').find('.specialCollapse').slideDown();
		$this.removeClass('panel-collapsed');
		$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
	}
})