Hi,

I have a table with horizontal and vertical scroll bars and would like to lock the column headers when scrolling in either direction.
 

<lightning:layoutItem size="12" padding="around-small"><b>Work Orders</b>
        <div class="external-events slds-table--header-fixed_container" style="height:20rem;">
            <div class=" slds-scrollable " style="height:100%;">
                <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table--header-fixed">
                    <thead>
                        <tr>
                            <th scope="col">
                                <div class="slds-cell-fixed">WO#</div>
                            </th>
                            <th  scope="col">
                                <div class="slds-cell-fixed">Account</div>
                            </th>
                            <th scope="col">
                                <div class="slds-cell-fixed">Postcode</div>
                            </th>
                            <th scope="col">
                                <div class="slds-cell-fixed">Status</div>
                            </th>
                            <th scope="col">
                                <div class="slds-cell-fixed" >Subject</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration items="{!v.woList}" var="item">
                            <tr>
                                <td>
                                    <div class="{!'fc-event ' + item.className}" 
                                         data-id="{!item.id}"
                                         data-tag="{!item.tag}"
                                         onclick="{!c.handleClick}">{!item.WorkOrderNumber}   
                                    </div>
                                </td>
                                <td> 
                                    <div>{!item.accountName}</div>
                                </td>
                                <td> 
                                    <div>{!item.postcode}</div> 
                                </td>
                                <td> 
                                    <div>{!item.Status}</div>
                                </td>
                                <td>
                                    <div>{!item.Subject}</div>
                                </td>                            
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
            </div>
        </div> 
    </lightning:layoutItem

At the moment it's scrolling ok, and when you scroll vertically the headers are fixed, but the column headers do not move when scrolling horizontally. I'm guessing it's because of the slds-cell-fixed, but I'm not sure what to change it to.
Any help would be much appreciated