Question

我一直试图在我正在工作的页面上获得响应，但是我似乎无法使其正常工作，我什至将表添加到了包装器中，因为有人指出了另一篇文章，但仍然无法正常工作。这是代码，有人可以指出我失败的地方吗？我尝试了几种添加表的方法，它不会让步，其余元素几乎无法正常工作。

html{
        height: 100%;   
        box-sizing: border-box;
        overflow: hidden;
    }
    body{
        background: url('PaulistaAV.png') no-repeat fixed;
    }
    a
    {
        color: #ffffff;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    .menulateralitem {
        padding-left: 15px;
        text-align: left;
        cursor: pointer;
        color: white;
        border-bottom: 2px solid #4a5d6e;
    }
    .logo{
        float: left;
        margin-top: 18px;
        margin-left: 15px;
        margin-right: 10px;
    }
    h2.header{
        color:white;
        margin-left: 10px;
        margin-top: 22px;
        font-size: 2.5vh;
    
    }
    p.header{
        color: white;
        float: right;
        margin-top: 13px;
        margin-right: 10px;
    }
    div#menulateral{
        background-color: #2e3f51;
        height: 100vh;
        width: 240px;
        color: white;
    }
    #menulateral:link{
        color: white;
    }
    #header{
        height: 70px;
        background-color: #011629;
    }
    
    h1 {
      font-size: 5.9vw;
    }
    h2 {
      font-size: 3.0vh;
    }
    p {
      font-size: 2vmin;
    }
    #menulateral-suporteinfo{
        margin-left: 15px;
        position: absolute;
        bottom: 100px;
        
    }
    #pagetitle{
        margin-top: 26px;
        margin-left: 16px;
    }
    #bar{
        margin-left: 16px;
        height: 2px;
        width: 79vw;
        margin-right: 30px;
        margin-top: 6px;
        background-color: #0b1c2c;
        
    }
    div#workspace{
        position:fixed;
        left:240px;
        top:70px;
        width:100vh;
        height:100vh;
    }
    
    .menulateralitem{
        padding-top: 15px;
    }
    table#tablecontas{
        margin-top: 10px;
    }
    @media screen and (max-width:800px) {
      .left, .main, .right {
        width:100%; 
      }
    }

<!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="ol%C3%A1.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
        <title>Hello, world!</title>
      </head>
      <body>
         <div class="row" id="header">
             <div class="col"><img src="LogoBranca.png" class="logo"><h2 class="header">Project Name | Password safe</h2></div>
          <div class="col"></div>
          <div class="col"><p class="header">Olá Fulano de tal <br> Sair <img src="door.png"></p></div>
        </div>
         <div class="row">
        <div class="col-sm">
      <div id="menulateral">
    			<div class="menulateralitem" id="div-apps">
    				<p class="menulateralitemtext">
    					<img src="PuzzlePiece.png"> &nbsp;
    					APLICA&Ccedil;&Otilde;ES
    				</p>
    			</div>
    			<div class="menulateralitem" id="div-contas">
    				<p class="menulateralitemtext">
    					<img src="magglass.png"> &nbsp; CONTAS
    				</p>
    			</div>
    
    			<div class="menulateralitem" id="div-adicionarcontar">
    				<p class="menulateralitemtext">
    					<img src="PuzzlePiece.png"> &nbsp;
    					ADICIONAR CONTA
    				</p>
    			</div>
    			<div id="menulateral-suporteinfo">
    				<p>SUPORTE (12)7299-2526</p>
    				<p>
    					<a href="mailto:suporte@bancopaulista.com.br">suporte@mail.com.br</a></p>
    			</div>
    		</div>
        </div>
        <div class="col-sm">
        </div>
        <div class="col-sm">
        </div>
      </div>
          <div id="workspace">
            <div class="row">
            <div class="col">
                <h4 id="pagetitle">GERENCIAR CONTAS</h4>
                <div id="bar"></div>
                </div>
                </div>
            <div class="col">
                <div class="table-responsive">
                  <table class="table table-dark" id="tablecontas">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>        
            </div>
            <div class="col">
            </div>
          </div>
    
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      </body>
    </html>

Answer 1

在div＃workspace中设置宽度和高度似乎是个问题。删除这些，可以给我一个响应更快的表。

您的HTML正常运行即可。然后，我添加了CSS，得到与您相同的结果，直到我注意到这两个设置。

无法获得引导者的工作响应能力

1 个答案: