Twitter bootsrap table border issue

Question

Bootstrap table right border не обертывает таблицу, если количество столбцов слишком велико, как показано на скрипке: http://jsfiddle.net/sCAUv/2/ Здесь, в примере, правая граница останавливается в h18. Я бы хотел, чтобы он обернул таблицу. Любые идеи о том, как исправить это?

<table class="table table-condensed table-bordered table-striped"> 
<thead> 
    <tr> 
     <th>h1</th> 
     <th>h2</th> 
     <th>h3</th> 
     <th>h4</th> 
     <th>h5</th> 
     <th>h6</th> 
     <th>h7</th> 
     <th>h8</th> 
     <th>h9</th> 
     <th>h10</th> 
     <th>h11</th> 
     <th>h12</th> 
     <th>h13</th> 
     <th>h14</th> 
     <th>h15</th> 
     <th>h16</th> 
     <th>h17</th> 
     <th>h18</th> 
     <th>h19</th> 
     <th>h20</th> 
     <th>h21</th> 
     <th>h22</th> 
     <th>h23</th> 
     <th>h24</th> 

    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
</tbody>  

Answer 1

Я вижу точно, что вы имеете в виду. Проблема в том, что таблицы не могут быть обернуты. Если бы они могли, как вы узнаете, если это текст переполнения или если это новая строка?

Невозможно избежать такой проблемы, если вы не хотите разбить таблицу на две отдельные таблицы.

Для других, которые любопытны о том, что он говорит о том, посмотрите на этом скриншоте:

На скриншоте выше, есть горизонтальная полоса прокрутки, которая может быть навязчивой для посетителей сайта ,

В настоящее время не существует какой-либо способ, чтобы обернуть таблицу вниз без много дополнительной путаницы в настоящее время причины (что было бы еще хуже, чем с полосой прокрутки.

Много это проблема может быть решена путем изменения разрешения экрана или размера даже шрифта table элемента Такие, как:.

table { 
    font-size:90% !important; 
} 

держать также в виду, что вы должны держать модификатор !important как Twitter-Bootstrap стремится переопределить некоторые пользовательские CSS в некоторые случаях.

Я не рекомендую вообще обертывать стол. Это станет очень недружественным пользователем и, вероятно, будет контрастировать с привлекательным сайтом.