Fixed table header with dynamic colums with angularjs

I have issue with table with and fixed headers

help me to do, fixed header.

If dynamic columns are more than one its woking good as above image. If getting not good design where there is only one like below image:

Here is an html

<table id="gridcostpool11" class="gridexcel table table-condensed table-bordered tableSection" style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; border-width: 0 0 0 0 !important; box-shadow: 0 0 0 0 !important; border-spacing: 0 0 0 0 !important;">
        <thead>

            <tr>
                <th style="width: 125px;"></th>
                <th style="width: 305px"></th>
                <th style="width: 105px;"></th>
                <th style="min-width:102px;" ng-repeat="(key,val) in quantities">{{val.RequestQuantity}}</th>
                <!--<th style="min-width:102px;" ></th>-->
            </tr>
            <tr>
                <th style="width: 125px;min-width: 125px;">LineItem</th>
                <th style="width: 305px;min-width:305px;">Description</th>
                <th style="width: 105px;min-width: 105px;">QtyPerBoard</th>
                <th ng-repeat-start="(key,val) in quantities" style="min-width: 115px">Unit $</th>
                <th ng-repeat-end style="min-width: 100px;width:165px;">Total $</th>
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="pur in purchases">
                <td style="width:125px;min-width:125px; " >{{pur.ItemNo}}</td>
                <td style="width:305px;min-width:305px;">{{pur.LineItemDescription}}</td>
                <td style="width:105px;min-width:105px;" id="qtyPerBoard_{{pur.LineItemId}}">{{pur.QtyPerBoard}}</td>
                <td ng-repeat-start="(key,val) in pur.Quantities" style="min-width:115px;width:118px;">
                    <a id="unit_{{val.QuantityId}}_{{pur.LineItemId}}" ng-click="openSuppliersPopUp(val.QuantityId,pur.LineItemId,val.QuantitiesSuppliersId)">{{ val.SelectedPrice == null?'Select Rate': val.SelectedPrice}}
                    </a>

                </td>
                <td ng-repeat-end style="min-width:130px;width:165px;">
                    <label id="total_{{val.QuantityId}}_{{pur.LineItemId}}">
                        {{val.SelectedPrice * pur.QtyPerBoard | number:3}}
                    </label>
                </td>
            </tr>

            <tr>
                <td style="width:125px;min-width:125px;" ></td>
                <td style="width:305px;min-width:305px;  "></td>
                <td style="width:105px;min-width:105px;" >
                    <label><strong>
                        Total </strong>
                    </label>
                </td>
                <td ng-repeat-start="(key,val) in totalPrices" style="min-width:115px;width:118px;">
                    <label id="totalPerUnit_{{val.QuantityId}}">
                        {{  val.TotalSelectedPrice | number:3}}
                    </label>

                </td>
                <td ng-repeat-end style="min-width:130px;width:165px;">
                    <label id="totalQty_{{val.QuantityId}}" >
                        {{ val.TotalQtyPerBoardPrice | number:3}}
                    </label>
                </td>
            </tr>

        </tbody>

    </table>

And Here is the css

  table.tableSection {
   display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: overlay;
    overflow-x:hidden;
    height: 150px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    /*text-align: left;*/
}