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

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

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

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

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>
10
css html responsive-design twitter-bootstrap

4 ответов

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

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

проблема в том, что это аннулирует .container bootstrap styling, который устанавливает жестко закодированные ширины в пикселях на основе размера окна просмотра. Мне не нужен контент с шириной страницы, поэтому я добавил новый класс, который похож на .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

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

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

пример

3

Я изменил некоторые 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

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

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

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

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

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

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

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

1