引导模式溢出我的表行

Question

参见http://jsfiddle.net/9sjRh/

我在一个模态表，但它是溢出的。我玩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

Answer 2

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

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

Answer 3

Table尽量适合容器内的内容，但如果文本太长，它将被迫覆盖容器的宽度和扩展。您可以使用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>

看看我在这里对你的代码的格式化

Answer 4

你需要覆盖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
    }

样式目前在bootstrap.min.css中，你可以在你自己的CSS类中添加以下样式:

Answer 5

user1707141的答案有效。但是Bootstrap有它的特定类:table-responsive

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

Answer 6

第一件事:你必须用table-responsive类将你的表包装在div中。

我的问题是(在Bootstrap 3中)div.table-responsive在div.container内，我把div.table-responsive放在div.container之外，它像魅力一样工作

Answer 7

对于溢出文本，您需要添加这个类

td{
white-space : normal;
}

bootstrap默认类将其设置为不换行，当您有长文本时导致表溢出。