JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<h1>With header</h1>

<table class="table table-hover table-striped" style="width: 100%;">
    <thead>
        <tr>
            <th>Name</th>
            <th>Lastname</th>
            <th>Age</th>
            <th>Location</th>
            <th>Country</th>
            <th>Buttons</th>
        </tr>
    </thead>
    
    <tr>
        <td>Normann</td>
        <td>Ohrmann</td>
        <td>69</td>
        <td>Trainstation 12</td>
        <td>US</td>
        <td>
            <span class="glyphicon glyphicon-remove"></span>
            <span class="glyphicon glyphicon-open"></span>
            <span class="glyphicon glyphicon-edit"></span>
        </td>
    </tr>
    
    <tr class="warning">
        <td>Harald</td>
        <td>Herrmann</td>
        <td>30</td>
        <td>-</td>
        <td>-</td>
        <td>
            <span class="glyphicon glyphicon-remove"></span>
            <span class="glyphicon glyphicon-open"></span>
            <span class="glyphicon glyphicon-edit"></span>
        </td>
    </tr>
    
     <tr class="danger">
        <td>John</td>
        <td>Hames</td>
        <td>3</td>
        <td>Street 10</td>
        <td>US</td>
        <td>
            <span class="glyphicon glyphicon-remove"></span>
            <span class="glyphicon glyphicon-open"></span>
            <span class="glyphicon glyphicon-edit"></span>
        </td>
    </tr>
    <tr class="success">
        <td>John</td>
        <td>Hames</td>
        <td>13</td>
        <td>House 11a</td>
        <td>China</td>
        <td>
            <span class="glyphicon glyphicon-remove"></span>
            <span class="glyphicon glyphicon-open"></span>
            <span class="glyphicon glyphicon-edit"></span>
        </td>
    </tr>
    
    <tr class="info">
        <td>Marash</td>
        <td>IMKiddingMaisBalalMasifo</td>
        <td>56</td>
        <td>Hill 11</td>
        <td>India</td>
   ...

CSS

@media (max-width:768px) {
  /* removing table display */
  .table, .table thead, .table th, .table tbody, .table tr, .table td {
		display: block;
	}

	.table {
		overflow: hidden;
		position: relative;
	}
  
  /* place the header on the left */
	.table thead {
		width: 50%;
	}
  
  
	.table thead ~ /* make tbody absolute if there is a thead */
	tbody { /* place the body on the right and make it scrollable */
		position: absolute;
		top: 0px;
		left: 50%;
		bottom: 0px;
		width: 50%;
		overflow-y: auto;
		overflow-x: hidden;	
	}

  /* remove unnecessary borders */
	.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td,
.table > tbody > tr:last-child {
		border: none;
	}
  
  /* add borders for every "row" */
	.table > tbody > tr {
		border-bottom: 1px solid #DDD;
	}

  
  /* ensure fields have a one line height or cut them else */
	.table > tbody > tr > td,
	.table > thead > tr > th {
	    text-align: left;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
}