Bootstrap таблица переполняется родитель

Question

У меня есть следующие HTML

<div class="page-content container"> 
    <div class="row"> 
     <a class="btn btn-default btn-lg btn-block" href="#">Add Exercise</a> 
    </div> 
    <div class="row"> 
     <table class="table table-condensed table-hover"> 
      <caption>Exercises</caption> 
      <thead> 
       <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Technique</th> 
        <th>Sub Technique</th> 
        <th>Description</th> 
        <th>Accents</th> 
        <th>Min Persons</th> 
        <th>Max Persons</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>Lorem</td> 
        <td>Ipsum</td> 
        <td>Dolor</td> 
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</td> 
        <td>sit</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Проблема у меня в том, что table переполняет .row родителя. Я пробовал несколько вещей, искал в google и нашел ответы, но никаких решений (по крайней мере, не для меня).

Я пробовал this, но тогда все столбцы равны по ширине, и я не хочу этого.

Пробовал this, this и this, но ничего не делает трюк для меня.

Я сделал fiddle, чтобы вы могли видеть, что я имею в виду. Я хочу, чтобы все содержимое содержалось в .container с красной рамкой.

EDIT:

Проблема, как представляется, только происходящий в хроме.

Ожидаемый выход:

Answer 1

По умолчанию таблицы верстки в автоматический режим. Вы должны установить его в фиксированный, так что он может взять на себя ширину:

table{ 
    table-layout: fixed; 
} 

solved fiddle

Answer 2

table-layout:fixed Использования сделают столбцы равно одинаковой шириной и не сломает ваш max-width:100% переполнения.

Но учитывая тот факт, что у вас есть «длинный столбец содержимого», вы можете указать этому столбцу имя класса и установить для этого класса значение max-width.