Bootstrap, center table, I want to put the table in the middle of the screen, it is already aligned but it is under the screen

0

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <!-- Importando o css do bootstrap -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style2.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

  <!-- Bootstrap CSS -->

  <style>
    table {
      width: 84%;
      position: absolute;
      right: 10px;
    }
    
    .table-bordered {
      width: 80%;
      position: absolute;
      right: 25px;
    }
    
    table,
    th,
    td {
      border: 1px solid black;
      border-radius: 10px;
    }
    
    th,
    td {
      padding: 20px;
      text-align: left;
    }
    
    table#t01 tr:nth-child(even) {
      background-color: #eee;
    }
    
    table#t01 tr:nth-child(odd) {
      background-color: #fff;
    }
    
    table#t01 th {
      background-color: black;
      color: white;
    }
  </style>

</head>


<body>





  <span id="center11"><h1 style="color:pink;">Ingredientes</h1></span>
  <div class="menu">
    <ul>
      <li style="color:aliceblue"><i class="fas fa-home" aria-ridden="true" id="opa"></i>
        <a href="home.html">
          <h3 style="color:aliceblue">Home</h3>
        </a>
        <br>
      </li>
      <li style="color:aliceblue"><i class="fas fa-user" aria-ridden="true" id="opa"></i>
        <a href="c_funcionario.html">
          <h3 style="color:aliceblue">Funcionarios</h3>
        </a>
        <br>
      </li>
      <li style="color:aliceblue"><i class="fas fa-address-book" aria-ridden="true" id="opa"></i>
        <a href="c_cliente.html">
          <h3 style="color:aliceblue">Clientes</h3>
        </a>
        <br>
      </li>
      <li style="color:aliceblue"><i class="fas fa-birthday-cake" aria-ridden="true" id="opa"></i>
        <a href="c_produtos.html">
          <h3 style="color:aliceblue">Produtos</h3>
        </a>
        <ul>
          <li><a href="c_ingredientes.html">Ingredientes</a></li>
          <li><a href="estoque.html">Consulta</a></li>
        </ul>
        <li style="color:aliceblue"><i class="fas fa-dolly" aria-ridden="true" id="opa"></i>
          <a href="c_encomenda.html">
            <h3 style="color:aliceblue">Encomenda</h3>
          </a>
        </li>
      </li>
    </ul>
  </div>

  <div id="table">

    <div class="row ">
      <div class="col-md-12">
        <div class="container ">

          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Ingredientes</th>
                  <th>Código Ingredientes</th>
                  <th class="actions">Ações</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>1</th>
                  <td>Conteúdo</td>
                  <td>Conteúdo</td>
                  <td class="actions">
                    <a class="btn btn-success btn-xs" href="view.html">Visualizar</a>
                    <a class="btn btn-warning btn-xs" href="edit.html">Editar</a>
                    <a class="btn btn-danger btn-xs" href="#" data-toggle="modal" data-target="#delete-modal">Excluir</a>
                  </td>
                </tr>
                <tr>
                  <th>2</th>
                  <td>Conteúdo</td>
                  <td>Conteúdo</td>
                  <td class="actions">
                    <a class="btn btn-success btn-xs" href="view.html">Visualizar</a>
                    <a class="btn btn-warning btn-xs" href="edit.html">Editar</a>
                    <a class="btn btn-danger btn-xs" href="#" data-toggle="modal" data-target="#delete-modal">Excluir</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>






  <div class="container">
  </div>
  <center><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyModal">Cadastrar</button></center>

  <div id="MyModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <div class="container">
            <div class="row centered-form">
              <div class="col-xs-16 col-sm-6 col-md-6 col-sm-offset-4 col-md-offset-1">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">Registro de Ingredientes</h3>
                  </div>
                  <div class="panel-body">
                    <form role="form">
                      <div class="row">
                        <div class="col-xs-6 col-sm-6 col-md-6">
                          <div class="form-group">
                            <input type="text" name="cod_ingrediente" id="cod_ingrediente" class="form-control input-sm" placeholder="Codigo do Ingrediente">
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6">
                          <div class="form-group">
                            <input type="text" name="nome_ingrediente" id="nome_ingrediente" class="form-control input-sm" placeholder="Nome do Ingrediente">
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address">
                      </div>

                      <input type="submit" value="Register" class="btn btn-info btn-block">

                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>




</body>

<!-- Importando o jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--Importandoojsdobootstrap--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="js/java.js" type="text/javascript"></script>



</html>
    
asked by anonymous 17.09.2018 / 15:57

0 answers