Блог

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

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;*/
}