Twitter靴带表格边框问题

Question

如果列数过多，引导程序表右边框不会包裹表格，如小提琴中所示：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的引导往往忽略了一些自定义CSS在部分例。

我不建议尝试将表格包下来。它会变得非常不友好，并且可能与一个吸引人的网站形成鲜明对比。