Twitter引导程序表边框问题

Question

如果列数过多，

Bootstrap表右边框不会包装表，如小提琴所示：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。

我不建议尝试将桌子包裹起来。它会变得非常不友好，并且可能与引人入胜的网站形成对比。