Question

我有一个模态表，但它溢出。我用它来玩css技巧，例如改变模态的宽度或改变边距。这些似乎都没有奏效。任何帮助将不胜感激。

HTML

<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1"
    role="dialog" aria-labelledby="classInfo" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              ×
            </button>
            <h4 class="modal-title" id="classModalLabel">
              Class Info
            </h4>
          </div>
          <div class="modal-body">
            <table id="classTable" class="table table-bordered">
              <thead>
              </thead>
              <tbody>
                <tr>
                  <td>CLN</td>
                  <td>Last Updated Date</td>
                  <td>Class Name</td>
                  <td># Tests</td>
                  <td>Test Coverage (Instruction)</td>
                  <td>Test Coverage (Complexity)</td>
                  <td>Complex Covered</td>
                  <td>Complex Total</td>
                  <td>Category</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

JS

$('#classModal').modal('show')

Answer 1

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

将下面写的CSS标签附加到你的小提琴中并完成任务。

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

你可以找到我的JSFiddle here。

Answer 2

表尝试将内容放在容器中，但如果文本太长，则会强制覆盖容器的宽度和扩展。您可以使用table-layout:fixed强制它在容器内重新调整大小，但会导致不需要的格式，例如 this.

如果你有冗长的标题，我建议你遵循垂直标题方法，如下所示：

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

查看我在代码中 here 的格式。

Answer 3

您需要将样式覆盖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类中添加以下样式。

Answer 4

user1707141的答案有效。但Bootstrap有其特定的表类：表响应

此处有关此元素的文档：https://getbootstrap.com/docs/4.0/content/tables/#always-responsive

Answer 5

第一件事：您必须将表包装在div类中的table-responsive中。

我的问题是（在Bootstrap 3中）div.table-responsive在div.container里面，我将div.table-responsive放在div.container外面，它像一个咒语一样工作了

Bootstrap模式溢出我的表行

5 个答案: