Bootstrap模式溢出我的表行

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中，并添加溢出：自动作为样式

<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

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