Bootstrap modal overflowing my table row

Question

See http://jsfiddle.net/9sjRh/

I have table in a modal but it is overflowing. I have playing css tricks with it such as changing the width of the modal or changing the margins. None of these seems to have worked. Any help would be appreciated.

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

I am not sure if the issue is resolved or not but my solution is :

Append the below written CSS tag into your fiddle and get the thing done.

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

You can find my JSFiddle here.

Answer 2

I know its too late but this is what worked for me

Wrapped the table inside a div and added overflow:auto as a style

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