Bootstrap表响应无法在面板中工作

Question

以下是使用Twitter bootstrap 3.3.1的代码。表格响应div位于面板下方。当我减小浏览器的宽度时它会起作用，但是当我在iPhone中打开它时它不会。

<div class="panel panel-info">
    <div class="panel-heading">
       responsive table test
    </div>
    <div class="table-responsive">
        <table class="table table-condensed">
            <colgroup>
                <col style="width: 40%;" />
                <col style="width:30%;" />
                <col style="width:30%;" />
            </colgroup>
             <thead>
                <tr>
                    <th> test 1 </th>
                    <th> test 2 </th>
                    <th> test 3 </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                 <td> ... </td>
                 <td> ... </td>
                 <td> ... </td>
               </tr>
             </tbody>
         </table>
    </div>
 </div>