Twitter bootstrap 引导模式溢出我的表行

看

我有一张桌子在模态中，但已经满了。我用它玩css把戏，比如改变模式的宽度或改变边距。所有这些似乎都不起作用。任何帮助都将不胜感激

HTML

---

Table会尽力使内容适合容器，但如果文本太长，它将被迫覆盖容器的宽度和排列。您可以使用

表布局：fixed

强制它在容器中重新调整大小，但它会导致不需要的格式设置，如

如果您有很长的标题，我建议您采用垂直标题方法，如下所示：

<tbody>
    <tr>
        <th>Heading 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th>Heading 2</th>
        <td>Value 2</td>
    </tr>
</tbody>

标题1
值1
标题2
价值2

---

请看一下我对您的代码所做的格式化。

您需要将8px样式改写为5px或更小

 .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {

        padding: 5px !important; // currently 8px
    }

---

syle当前位于bootstrap.min.css中。您可以在自己的css类中添加以下样式。

我不确定问题是否已解决，但我的解决方案是：

将下面写的CSS标签附加到你的小提琴中，然后完成这件事

.modal-body {
  overflow-x: auto;
}

---

你可以找到我的JSFIDLE。

我知道已经太晚了，但这对我来说是有效的

将表包装在一个div中，并添加了overflow:auto作为样式

<div style="overflow: auto">
       <table class="table table-hover">

            <thead>
                <tr >
                   <th id="th1">Header 1</th>
                   <th id="th2">Header 2</th>
                </tr>
            </thead>

             <tbody>

             </tbody>

          </table>
</div>

标题1
标题2

用户1707141的答案有效。 但是Bootstrap对您的表有其特定的类：table responsive

---

关于此元素的文档说明如下：

第一件事：必须将表包装在

div

中，并使用类

表响应

---

我的问题是（在Bootstrap 3中）

div.table-responsive

在

div.container

内，我将

div.table-responsive

放在

div.container

外，它像一个符咒一样工作

在这上面有两件事。。。你几乎不应该（不应该）使用

！重要信息

，因为这会产生严重影响。此外，如果有疑问，请滚动。

.modal-body {
  overflow-x: auto;
}

<div style="overflow: auto">
       <table class="table table-hover">

            <thead>
                <tr >
                   <th id="th1">Header 1</th>
                   <th id="th2">Header 2</th>
                </tr>
            </thead>

             <tbody>

             </tbody>

          </table>
</div>