0

如果列数过多，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>
<table>
4

1 回答 1

0

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

除非您想将表拆分为两个单独的表，否则无法避免此类问题。

对于其他对他在说什么感到好奇的人，请查看此屏幕截图：

原始海报问题的详细描述。

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

到目前为止，没有任何方法可以在不引起更多用户混淆的情况下将表格折叠起来（这比使用滚动条更糟糕。

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

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

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

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

于 2013-08-03T17:47:17.160 回答