Изменение размера содержимого таблицы внутри модального окна Bootstrap

Я сделал простое модальное окно с помощью Bootstrap, чтобы пользователи могли просматривать содержимое таблицы. Однако у меня возникла проблема при попытке сохранить содержимое таблицы внутри модального окна.

Когда я уменьшаю размер веб-сайта / модального окна, содержимое таблицы выходит за пределы модального окна. Есть ли способ заставить пользователей прокручивать страницу, чтобы они могли видеть все содержимое таблицы внутри?

Это мой код JSFiddle:

<button type = "button" class = "btn btn-default" data-toggle = "modal" data-target = "#complex">Button</button>
<div class = "modal fade" id = "complex" tabindex = "-1" role = "dialog">
  <div class = "modal-dialog" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
        <h4 class = "modal-title" id = "myModalLabel">Test</h4>
      </div>
      <div class = "modal-body">
        <table id = "example" class = "table">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>ID Number</th>
              <th>Proband</th>
              <th>Gender</th>
              <th>Birth Date</th>
              <th>Life Status</th>
              <th>Phenotype</th>
              <th>Genotype</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>