Bootstrap 3 table - table-responsive not working

问题:

I'm using bootstrap 3 for a website project. I'm trying to create a page with a responsive table, so that I'd have the scrollbar when the table is too big. I made a test case like so:

<div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

Now, the problem is that it doesn't add the scrollbar, it merely expands the website to the width of the table.

See a screenshot here:

I've seen it working on several other websites, so something I'm doing...is wrong.

回答1:

Replace your table-responsive with this

<div class='table-responsive'> -> <div style="overflow-x:auto;">

回答2:

Make sure to set your table display block

.table {
   display: block !important;
}

回答3:

bootstrap's table-responsive works fine in sandbox environments, but it is buggy on live environments. The reason for the bug is that bootstrap gives table-responsive styles of width: 100% and overflow-y: hidden. These two styles do not play nice together. Overflow hiding works best when there is a fixed or max-width. I gave table-responsive a max-width: 270px; for mobile devices, and that fixed the bug.

回答4:

You're code is fine. I just set up a fiddle here.

Works there!

I literally copied and pasted your code. Are you sure your links to Bootstrap's Javascript file and CSS file are working?

<div class="row">
 <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->

回答5:

I had this problem and found that it worked to either give the table a set width in px, or to set the table to display: block.

回答6:

I'v done it.

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table style="table-layout: fixed; width: 100%;">
                           <tr>
                               <td>


                                  //SCROLL
                                  <div style="width: 100%; overflow-x: auto;">

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table class="table table-hover">

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

You will receive at xs-screen (example from my app):

回答7:

You can use FooTable. It is a jQuery plugin that allows you to resize and redistribute the data within your tables to best suite your current breakpoint.

回答8:

For me it was the 'min-width' value in body element breaking the responsiveness of this class.

回答9:

Try this
remove <div class="table-responsive">...</div>
and move class table-responsive in
<div class="col-12 col-sm-12 col-lg-12">

example

<div class="col-12 col-sm-12 col-lg-12 table-responsive">

this 100% work but if dont work move class table-responsive to Earlier Div layer, In this case,
<div class="col-12 col-sm-12 col-lg-12">
must be removed.

回答10:

In my code, I did add a CSS class:

.modal-body{
  max-width:95vw;
}

The layout did work for sm