Bootstrap 3 table-responsive не работает. X-полоса прокрутки отображается на всем сайте, а не на таблице

Когда ширина моего экрана уменьшается меньше минимальной ширины, которую может отображать моя таблица, вместо того, чтобы получить горизонтальную полосу прокрутки на обертке table-responsive, она увеличивает ширину всего моего сайта. Я перепробовал все решения SO, с которыми мне не повезло.



Я подозреваю, что это как-то связано с моим стилем flexbox. В принципе, я оформил свой сайт так, что мой раздел содержимого главной страницы (который живет внутри <div id="aspnet-placeholder-content" class="container"></div>) будет занимать оставшуюся высоту окна просмотра после нижний колонтитул и липкий заголовок учитываются. До сих пор у меня не было никаких проблем, кроме этой.

Как я могу остановить таблицу от расширения ширины моего сайта?



EDIT: Вот JSFiddle на случай, если вам не нравится встроенная в so функциональность сниппета.






$(document).ready(function() {

  $("a").on("click", function(e) {

    e.preventDefault();

  })

  $("form").on("submit", function(e) {

    e.preventDefault();

  })

});

body {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}



form.page-wrapper {

  padding: 51px 0 0;

  position: static;

  height: 100%;

  display: flex;

  -ms-flex-direction: column;

  -webkit-flex-direction: column;

  flex-direction: column;

}



section#body-content {

  -ms-flex: 1 0 auto;

  -webkit-flex: 1 0 auto;

  flex: 1 0 auto;

  display: flex;

  -ms-flex-direction: column;

  -webkit-flex-direction: column;

  flex-direction: column;

}



section#body-content #subheader {

  background: #7e5bbd;

  padding-top: 35px;

  padding-bottom: 35px;

}



#aspnet-placeholder-content {

  flex: 1 0 auto;

}



footer {

  background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top;

  padding-top: 30px;

  padding-bottom: 30px;

  margin-top: 20px;

}



@media (min-width: 768px) {

  footer .footer-content div:first-child {

    text-align: right;

    border-right: 1px solid #868686;

  }

  footer .footer-content div:nth-child(2) {

    text-align: left;

    border-left: 1px solid #868686;

  }

}



footer h5 {

  color: #868686;

}



@media (max-width: 767px) {

  .padding-left-none-sm,

  .padding-right-none-sm {

    padding-left: 0;

    padding-right: 0;

  }

}



@media (min-width: 768px) {

  .padding-left-none-sm {

    padding-left: 0;

  }

  .padding-right-none-sm {

    padding-right: 0;

  }

  .text-right-sm {

    text-align: right;

  }

  .text-left-sm {

    text-align: left;

  }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<body>

  <form class="page-wrapper">

    <header class="navbar navbar-inverse navbar-fixed-top">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand">Logo</a>

        </div>

        <div class="navbar-collapse collapse">

          <ul class="nav navbar-nav navbar-right">

            <li id="liHome"><a href="/">Home</a></li>

            <li class="dropdown" id="liService">

              <a href="/" data-toggle="dropdown" class="dropdown-toggle">Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i>

              </a>

              <ul class="dropdown-menu dropdown-menu-left">

                <li><a href="/">Create Ticket</a></li>

                <li><a href="/">View Tickets</a></li>

              </ul>

            </li>

            <li id="liProposals">

              <a href="/">Proposals</a>

            </li>

            <li id="liProjects">

              <a href="/">Projects</a>

            </li>

            <li id="liDocuments">

              <a href="/">Documents</a>

            </li>

          </ul>

        </div>

      </div>

    </header>

    <section id="body-content">

      <div id="subheader">

        <div class="container">

          <div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;">

            <button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button>

          </div>

          <div class="col-sm-5 col-sm-pull-2 padding-left-none-sm">

            <div class="button-group">

              <select id="ddlLocations" class="form-control">

                  <option selected="selected" value="0">(select option)</option>

                  <option value="7889">Option 1</option>

                  <option value="8736">Option 2</option>

                  <option value="10398">Option 3</option>

                </select>

            </div>

          </div>

        </div>

      </div>

      <div id="aspnet-placeholder-content" class="container">

        <!--This is where page-specific server-generated content from ASP.NET will render-->

        <h3>Page Title</h3>

        <br>

        <div style="overflow-x: auto">

          <table id="tblLocs" class="table table-striped">

            <tbody>

              <tr>

                <th>System</th>

                <th>Location Type</th>

                <th>Location</th>

                <th style="text-align: center;">Wired</th>

                <th style="text-align: center;">Equipped</th>

                <th style="text-align: center;">Programmed</th>

                <th style="text-align: center;">Tested</th>

              </tr>

              <tr>

                <td>Access Control</td>

                <td>Computer Station</td>

                <td>2nd Floor IT Room</td>

                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

              </tr>

              <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>Security Office</td>

                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

              </tr>

              <tr>

                <td>&nbsp;</td>

                <td>Badging Station</td>

                <td>Security Desk</td>

                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

              </tr>

              <tr>

                <td>&nbsp;</td>

                <td>Panel Location</td>

                <td>1st Floor Comm and Data Room</td>

                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

              </tr>

              <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>IT Closet</td>

                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

    </section>

    <footer>

      <div class="container">

        <div class="row text-center footer-content">

          <div class="col-sm-6">

            <h5>Footer text</h5>

          </div>

          <div class="col-sm-6">

            <h5>Copyright stuff</h5>

          </div>

        </div>

      </div>

    </footer>

  </form>

</body>
662   4  

4 ответов:

Спасибо всем, кто предложил решение. Все они, кажется, включают в себя установку ширины моей обертки на 100%, например: 

#aspnet-placeholder-content {
  flex: 1 0 auto;
  width: 100%;
}
Проблема в том, что это сводит на нет стиль .container bootstrap, который устанавливает жестко заданную ширину в пикселях на основе размера видового экрана. Я не хочу полностраничного контента, поэтому я добавил новый класс, который похож на .container, но использует max-width вместо width: 
.container-max {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container-max {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container-max {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container-max {
    max-width: 1170px;
  }
}

Теперь моя оболочка использует этот новый класс вместо .container, и наличие width: 100% на оболочке будет имеют желаемый эффект.

<div id="aspnet-placeholder-content" class="container-max">

Демонстрация конечного результата

4  
2017-05-31 17:49:50

Добавьте flex-wrap: wrap; display: flex; max-width: 100%; к #aspnet-placeholder-content это обернет вашу таблицу в соответствии с ее родителем.

#aspnet-placeholder-content {
    flex: 1 0 auto;
    flex-wrap: wrap;
    display: flex;
    max-width: 100%;
}

Пример

3  
2017-06-06 09:36:28

Я изменил некоторые css и стиль и класс в вашем демо, и вот ссылка 

<form class="page-wrapper">
  <header class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class=navbar-brand>Logo</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li id="liHome"><a href="/">Home</a></li>
          <li class="dropdown" id="liService">
            <a href="/" data-toggle="dropdown" class="dropdown-toggle">
                            Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i>
                        </a>
            <ul class="dropdown-menu dropdown-menu-left">
              <li><a href="/">Create Ticket</a></li>
              <li><a href="/>">View Tickets</a></li>
            </ul>
          </li>
          <li id="liProposals">
            <a href="/">
                            Proposals
                        </a>
          </li>
          <li id="liProjects">
            <a href="/">
                            Projects
                        </a>
          </li>
          <li id="liDocuments">
            <a href="/">
                            Documents
                        </a>
          </li>
        </ul>
      </div>
    </div>
  </header>
  <section id="body-content" class="continer">
    <div id="subheader">
      <div class="container">
        <div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;">
          <button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button>
        </div>
        <div class="col-sm-5 col-sm-pull-2 padding-left-none-sm">
          <div class="button-group">
            <select id="ddlLocations" class="form-control">
              <option selected="selected" value="0">(select option)</option>
              <option value="7889">Option 1</option>
              <option value="8736">Option 2</option>
              <option value="10398">Option 3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div id="aspnet-placeholder-content" style="padding:0 15px">
      <!--This is where page-specific server-gen"tblLocsted content from ASP.NET will render-->
      <h3>Page Title</h3>
      <br />
      <div class=" table-responsive">
        <table id="tblLocs" class="table table-striped">
          <tbody>
            <tr>
              <th>System</th>
              <th>Location Type</th>
              <th>Location</th>
              <th style="text-align: center;">Wired</th>
              <th style="text-align: center;">Equipped</th>
              <th style="text-align: center;">Programmed</th>
              <th style="text-align: center;">Tested</th>
            </tr>
            <tr>
              <td>Access Control</td>
              <td>Computer Station</td>
              <td>2nd Floor IT Room</td>
              <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>Security Office</td>
              <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Badging Station</td>
              <td>Security Desk</td>
              <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Panel Location</td>
              <td>1st Floor Comm and Data Room</td>
              <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>IT Closet</td>
              <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="row text-center footer-content">
        <div class="col-sm-6">
          <h5>Footer text</h5>
        </div>
        <div class="col-sm-6">
          <h5>Copyright stuff</h5>
        </div>
      </div>
    </div>
  </footer>
</form>

$(document).ready(function() {
  $("a").on("click", function(e) {
    e.preventDefault();
  })
  $("form").on("submit", function(e) {
    e.preventDefault();
  })
});

DemoLink 

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

form.page-wrapper {
  padding: 51px 0 0;
  position: static;
  height: 100%;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

section#body-content {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

section#body-content #subheader {
  background: #7e5bbd;
  padding-top: 35px;
  padding-bottom: 35px;
}

#aspnet-placeholder-content {
  flex: 1 0 auto;
}

footer {
  background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  footer .footer-content div:first-child {
    text-align: right;
    border-right: 1px solid #868686;
  }
  footer .footer-content div:nth-child(2) {
    text-align: left;
    border-left: 1px solid #868686;
  }
}

footer h5 {
  color: #868686;
}

@media (max-width: 767px) {
  .padding-left-none-sm,
  .padding-right-none-sm {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .padding-left-none-sm {
    padding-left: 0;
  }
  .padding-right-none-sm {
    padding-right: 0;
  }
  .text-right-sm {
    text-align: right;
  }
  .text-left-sm {
    text-align: left;
  }
}
2  
2017-06-06 10:52:55

Задайте свойству width значение 100% ...

На столе появится горизонтальная полоса прокрутки ...

Я также переместил тег h3 с внутренней стороны этого div ...

 #aspnet-placeholder-content {
 flex: 1 0 auto;
 width: 100%; 
 }

Если вы хотите, чтобы таблица действительно была отзывчивой и изменяла размер вместе со страницей, вам придется написать еще немного кода относительно отдельных ячеек ...

Примером этого может быть гончая в этой нити ...

И еще одно классное решение для адаптивной таблицы данных находится в это сайт ...

1  
2017-05-26 16:16:13

Comments

    Ничего не найдено.
Click here to cancel reply.