Table with Bootstrap does not respond to some displays

Question

Table with Bootstrap does not respond to some displays

Navigation

#1 by (0 votes)

0

I'm doing a table with bootstrap, and I'm testing google chrome, but when I put it to see how it would look on Iphone 5, the table does not shrink and pops up the layout.

ThisblacklineinfrontofthetablewasaborderthatIputintheinClassRow,justtoshowtheborderofit.

table img {
  width: 50px;
  height: 50px;
}

thead tr {

  background-image: -webkit-linear-gradient(top, #4183D7, #22A7F0);
  font-weight: bold;
  color: #FFF;

}
.row {
  border:2px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resultados da Votação</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/estilo-padrao.css">
  <link rel="stylesheet" href="css/resultado-votacao-estilo.css">
</head>
<body>

  <header>
    <nav class="navbar navbar-inverse">

      <div class="container-fluid">

        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Comida de Boteco</a>
          <button data-toggle="collapse" data-target="#menu" class="navbar-toggle collapsed">Menu</button>
        </div><!-- fim navbar-header -->

        <div id="menu" class="collapse">

          <ul class="nav navbar-nav">
            <li><a href="index.html">Início</a></li>
            <li><a href="lista-comidas.html">Lista de Comidas</a></li>
          </ul>

        </div><!-- fim menu -->

      </div><!-- fim container -->
    </nav>
  </header>

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

        <table class="table table-bordered table-condensed table-responsive text-center">
          <thead>
            <tr>
              <td>Colocação</td>
              <td>Imagem</td>
              <td>Nome</td>
              <td><span class="glyphicon glyphicon-thumbs-up"></span></td>
              <td><span class="glyphicon glyphicon-thumbs-down"></span></td>
            </tr>

          </thead>

          <tbody>

            <tr>

              <td><img src="img/medalha-ouro.png" alt="Primeiro Colocado" title="1°"></td>
              <td><img src="img/comidas/comida1.jpg" alt="imagem da comida"></td>
              <td>Hambúrguer Gourmet</td>
              <td>30 Votos</td>
              <td>10 Votos</td>

            </tr>

            <tr>

              <td><img src="img/medalha-prata.png" alt="Segundo Colocado" title="1°"></td>
              <td><img src="img/comidas/comida2.jpg" alt="imagem da comida"></td>
              <td>Pizza Gourmet</td>
              <td>20 Votos</td>
              <td>15 Votos</td>

            </tr>

            <tr>

              <td><img src="img/medalha-bronze.png" alt="Terceiro Colocado" title="1°"></td>
              <td><img src="img/comidas/comida3.jpg" alt="imagem da comida"></td>
              <td>Coxinha Gourmet</td>
              <td>10 Votos</td>
              <td>20 Votos</td>

            </tr>
          </tbody>

        </table>

      </div><!-- fim Col-->
    </div><!-- fim da Row-->
  </section>

  <script src="js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap-3

asked by anonymous 10.11.2017 / 14:04

1 answer

Follow-up of visualization (pop up) Problems with using Ajax request

score 0 · Answer 1

As there are many answers here within the SOpt, Bootstrap CSS has responsive utilities, what you are doing wrong is not to list all utilities:

You must have 'col-md-* e col-lg-*' :

 <section class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

        <table class="table table-bordered table-condensed table-responsive text-center">
          </table>
      </div>
    </div>
 </section>

Note that% w / o% was added, 'div' and 'col-md-12' to indicate responsiveness in medium and large displays respectively.

Now, what is your mistake?

Because indicating 'col-lg-12' , you tell the table to be responsive to the first parent element above, ie about 'responsive-table' , in your case, it will not be responsive within a display that would interact with 'col-md- ' or 'col-lg - ' since it was not indicated for '<div class="col-xs-12 col-sm-12">' to have these relations.

OBS:

It's worth noting that if something takes size out of the allowed size, it will crash regardless of what you do, you need to have cohesion of the size of the element with the size of the content.