Bootstrap 3 table-responsive ne fonctionne pas. X-scrollbar apparaît sur l'ensemble du site plutôt que sur la table

quand la largeur de mon écran diminue plus petit que la largeur minimale que ma table est capable d'afficher, plutôt que d'obtenir une barre de défilement horizontale sur le table-responsive wrapper, c'est l'augmentation de la largeur de l'ensemble de mon site. J'ai tout essayé DONC la solution que j'ai rencontré avec pas de chance.

je soupçonne que cela a quelque chose à voir avec mon style flexbox. Fondamentalement, j'ai stylé mon site de sorte que ma page principale Section de contenu (qui vit à l'intérieur <div id="aspnet-placeholder-content" class="container"></div>) prendra la hauteur restante de la viewport après le pied de page et l'en-tête sticky sont comptabilisés. Jusqu'à présent, je n'ai eu aucun problème, d'ailleurs celui-ci.

Comment puis-je empêcher la table d'étendre la largeur de mon site?

EDIT: Voici un JSFiddle dans le cas où vous n'aimez pas la fonctionnalité snippet intégrée.

$(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
demandé sur chamina 2017-05-25 16:47:49

4 réponses

Merci à tous ceux qui ont offert une solution. Toutes semblent impliquer réglage de la largeur de mon wrapper à 100%, comme ceci:

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

le problème est que cela annule le .container style bootstrap, qui définit les largeurs codées en pixels en fonction de la taille du viewport. Je ne veux pas de contenu en pleine page, donc j'ai ajouté une nouvelle classe qui est comme .container, mais max-width au lieu de 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;
  }
}

maintenant mon wrapper utilise cette nouvelle classe au lieu de .container, et avoir width: 100% sur l'emballage aura l'effet désiré.

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

Démonstration du résultat final

4
répondu Jacob Stamm 2017-05-31 14:49:50

Ajouter flex-wrap: wrap; display: flex; max-width: 100%;#aspnet-placeholder-content ceci enveloppera votre table selon son parent.

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

Exemple

3
répondu Ismail Farooq 2017-06-06 06:36:28

j'ai changé quelques css et style et classe dans votre démo et voici le lien 

<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
répondu aditya shrivastava 2017-06-06 07:52:55

définit la propriété width à 100%...

une barre de défilement horizontale apparaît sur la table ...

j'ai aussi déplacé la balise h3 de l'intérieur de cette div ...

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

si vous voulez que la table soit vraiment réactive et redimensionnée avec la page, vous devrez écrire plus de code concernant les cellules individuelles ...

un exemple de ceci peut être lié à ce fil ...

et une autre solution fraîche pour un sensible table de données est en ce site...

1
répondu Gal Ratzkin 2017-05-26 13:16:13