css - Twitter Bootstrap 表边框问题

Question

如果列数太多，Bootstrap 表格右边框不会环绕表格，如 fiddle 所示:http://jsfiddle.net/sCAUv/2/ 在示例中，右边框停在 h18。我想要它来包裹 table 。 我该如何解决这个问题？

<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>
<table>

Answer 1

我完全明白你的意思。问题是表格不能被包装。如果可以，您如何知道它是溢出文本还是新行？

避免这种问题是不可能的，除非你想把表拆分成两个单独的表。

对于其他对他在说什么感到好奇的人，请看这个截图:

在上面的屏幕截图中，有一个水平滚动条，这对网站访问者来说可能很突兀。

截至目前，没有任何方法可以在不引起很多更多用户混淆的情况下将表格包裹起来(这比使用滚动条更糟糕。

很多这个问题都可以通过修改屏幕分辨率，甚至 table 元素的字体大小来解决。如:

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

另外请记住，您应该保留 !important 修饰符，因为 Twitter-Bootstrap 在某些情况下倾向于覆盖一些自定义 CSS。

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