JSFiddle - React, Tailwind, and code Playground

by hpvl

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
  <div class="container">
        <div class="row">
            <div class="col-md-5"></div>
            <div class="col-md-7">
                <table class="table table-fixed pplan">
                    <thead>
                        <tr class="table-condensed">
                            <th class="col-xs-7">Plan</th>
                            <th class="col-xs-2" style="text-align: right">Quantity</th>
                            <th class="col-xs-1">OOD</th>
                            <th class="col-xs-1">DOD</th>
                            <th class="col-xs-1">Lead Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="col-xs-7">Maximum data 1 </td>
                            <td class="col-xs-2" style="text-align: right">53 000</td>
                            <td class="col-xs-1"><span>w</span>11</td>
                            <td class="col-xs-1"><span>w</span>20</td>
                            <td class="col-xs-1">9</td>
                        </tr>
                        <tr>
                            <td class="col-xs-7">Maximum data 1 </td>
                            <td class="col-xs-2" style="text-align: right">53 000</td>
                            <td class="col-xs-1"><span>w</span>11</td>
                            <td class="col-xs-1"><span>w</span>20</td>
                            <td class="col-xs-1">9</td>
                        </tr>
                        
                        
                    </tbody>
                    <tfoot>
                        <tr>
                            <td class="col-xs-7"...

CSS

.table-fixed thead, .table-fixed tfoot, .table-fixed tbody {
    width: 97%;
}
.table-fixed tbody {
    height: 130px;
    height: auto \9;
    overflow-y: auto;
    width: 100%;
    max-height: 100px;
}
.table-fixed thead, .table-fixed tbody,.table-fixed tfoot, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th, .table-fixed tfoot td {
    float: left;
    border-bottom-width: 0;
    margin-left: 0px !important;
}

.pplan thead tr th {
    background: #ededed;
    border-bottom: medium none;
    border-left: 1px solid #d6d6d6;
    font-size: 11px;
    padding: 4px;
    height: 35px;
}

@media (max-width: 767px) {
    .table-fixed thead, .table-fixed tfoot, .table-fixed tbody {
        width: 97%;
    }
}