Отзывчивая таблица делает макет выходит за рамками 100% шириной

Question

Demo: http://codepen.io/anon/pen/JdWrKX?editors=110

Как вы можете видеть, что есть отзывчивая таблица внутри «.panel», который можно прокручивать по горизонтали. Отлично.

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

HTML:

<div id="wrap"> 

    <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="">Logo</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="">Logout</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

    <div class="content content-primary content-sm"> 
    <div class="container-fluid"> 

     <div class="row"> 
     <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> 
      <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="table-responsive"> 
       <table class="table-bordered"> 
        <tr> 
        <td> 
         <div>a</div> 
        </td> 
        <td>b</td> 
        </tr> 
       </table> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

    </div> 
    </div> 

    <footer> 
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="">Copyright</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="">Logout</a> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </footer> 
</div> 

CSS:

html, 
body { 
    height: 100%; 
} 

#wrap { 
    height: 100%; 
    display: table; 
    width: 100%; 
} 

#wrap > nav, 
footer { 
    display: table-row; 
} 

nav.navbar { 
    margin-bottom: 0; 
} 

.content-sm { 
    padding: 15px 0; 
} 

.content-primary { 
    background: #337ab7; 
} 

.content { 
    display: table-cell; 
    height: 100%; 
} 

td { 
    text-wrap: no-warp; 
} 

td div { 
    width: 900px; 
} 

Answer 1

Поскольку дочерние элементы .content, кажется, игнорируя значения% ширины, работа вокруг, которая работала для меня было:

.content > * { 
    width: 100vw; 
} 

Я также добавил класс .table для табличного элемента

<table class="table table-bordered"> 

Here is a Demo

ПРИМЕЧАНИЕ:Блокработает только в современных браузерах. Check support here

Answer 2

Попробуйте изменить ширину ребенка DIV вашей ТД как этот

td div { 
     width: auto; 
    } 

Я надеюсь, что это помогает исправления ошибки.

Answer 3

Если размер окна меньше или равен 900px, то содержимое td выходит за рамки этого. Вы не должны фиксировать размер td div в px. Вместо этого используйте% (в процентах).

td div 
{ 
    width: 100%; 
} 

Answer 4

Изменение кодовой таблицы, как это:

<div class="content content-primary content-sm"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> 
      <div class="panel panel-default"> 
      <div class="panel-body"> 
       <table class="table table-responsive table-bordered"> 
        <tr> 
        <td> 
         <div>a</div> 
        </td> 
        <td>b</td> 
        </tr> 
       </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

и удалить это из вашего файла CSS

td div { 
    width: 900px; 
} 

Answer 5

Проблема заключается в том, что table s являются по своей природе не реагировать. Вы прибегали к использованию displaytable, table-row и table-cell, которые расширяются за пределы содержимого с контентом и создают нежелательные эффекты.

Как вы можете видеть в этом fiddle: если вы удалите элементы table, проблема с шириной исчезнет, ​​но тогда вы не получите липкий нижний колонтитул, который вы ищете.

изменить свой CSS на:

html, 
body { 
    height: 100%; 

} 

#wrap { 
    min-height: 100%; 
    background: #337ab7; 
} 

.page-wrap:after { 
    content: ""; 
    display: block; 
    height: 51px; 
} 

nav.navbar { 
    margin-bottom: 0; 
} 

.content-sm { 
    padding: 15px 0; 
} 

.box-content { 
    width: 9000px; 
    height: 5000px; 
    background: red; 
} 

.box-responsive { 
    width: 100%; 
    max-width: 100%; 
    overflow-x: scroll; 
    border: 1px solid green; 
} 

вы получите нужную ширину отзывчивый, а также полную высоту веб-страницу с липким сноске.