Таблица растягивает контейнер, когда находится внутри вкладки

В настоящее время пытаюсь создать меню с вкладками в контейнере. Чего я не понимаю, так это того, что когда это просто таблица в контейнере, она ведет себя нормально. Но когда я помещаю таблицу внутрь вкладки, она растягивается до конца окна браузера.

HTML:

<ul class = "nav-tabs" role = "tablist" id = "myTabs" style = "margin-left:15px" !important>
    <li role = "presentation" class = "active"><a data-target = "#createContainer" aria-controls = "createContainer" role = "tab" data-toggle = "tab" style = "color:black">Create a Route</a></li>
    <li role = "presentation"><a data-target = "#importContainer" aria-controls = "importContainer" role = "tab" data-toggle = "tab" style = "color:black">Import a Route</a></li>
</ul>

<div class = "tab-content">
    <div role = "tabpanel" class = "tab-pane active" id = "createContainer">
        <div style = "padding: 4px 4px 4px 4px">
            <button type = "button" class = "btn btn-xs btn-default" style = "padding-bottom: 4px" ng-click = "capture.saveChanges()">Apply Changes</button>
            <div style = "padding-top: 4px">
                <table class = "table table-striped table-hover" id = "captureTable">
                    <thead>
                        <tr>
                            <th>Index</th>
                            <th>elem1</th>
                            <th>elem2</th>
                            <th>elem3</th>
                            <th>elem4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat = "x in capture.railLines track by x.ASSET_PK" ng-click = "capture.selectLine(x.ASSET_PK)">
                            <td>{{$index + 1}}</td>
                            <td>{{x.elem1}}</td>
                            <td>{{x.elem2}}</td>
                            <td>{{x.elem3}}</td>
                            <td><a ng-click = "capture.deleteLine(x.elem1)" href = "javascript:void(0);">{{capture.isOutOfOrder('sym')}}</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Заголовок таблицы будет реагировать на флаги max-width, width, word-break, table-layout, которые я установил для стиля <table>, но тело, кажется, всегда отклоняет его.

ИЗМЕНИТЬ CSS:

.nav-tabs > li {
    margin-bottom: 2px;
}

.nav-tabs {
    border-bottom: 1px solid #fff;
}

.nav-tabs > li > a {
    padding-top: 4px;
    padding-bottom: 2px;
}

.tab-content thead, .tab-content tbody tr {
    display: table;
    width: 100%;
}

.tab-content table tbody td, .tab-content table thead td {
    width: 100px;
}

.tab-content tbody {
    /*height:130px;*/
}

th, td {
    padding: 10px;
}

    table thead td,
    .stickyheader td {
        background: #222;
        color: #f4ba05;
        padding: 8px;
        margin: 0;
    }

    table tbody td {
        padding: 3px 7px 2px;
    }

    table tbody .alt td {
        color: #000;
    }

    table .highlight {
        background-color: #ffff94;
    }

    table .permHighlight {
        background-color: #ff530f;
    }

thead, tbody tr {
    /*display: table;
        width: 100%;*/
}

thead {
    width: calc( 100% - 1em );
    /*width:1320px;*/
}

    tbody td, thead td {
        /*width: 100px;*/
        border-right: 1px solid black;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tab-content thead, .tab-content tbody tr {
    display: table;
    width: 100%;
}

.tab-content table tbody td, .tab-content table thead td {
    width: 100px;
}

.tab-content tbody {
    /*height:130px;*/
}