Início / user-2549110

Gauravsa's questions

Martin Hope
Gauravsa
Asked: 2025-04-11 10:21:32 +0800 CST
  • 5

Como centralizar uma imagem em uma linha de tabela. Atualmente, tenho uma div como esta no Bootstrap:

insira a descrição da imagem aqui

<div class="container-fluid">
<div class="row align-items-center exclusion-empty">
    <div class="col"></div>
    <div class="col-1 lock-circle">
        <span>
            <i class="fa-regular fa-lock-keyhole lock-icon"></i>
        </span>
    </div>
    <div class="col"></div>
</div>
</div>

com css:

.lock-circle[b-pzm1s2lx32] {
border-radius: 50%;
background-color: grey;
border: 3px solid white;
width: 4.25rem;
height: 4.25rem;
}

.exclusion-empty {
margin-top: 0.63rem;
height: 8.125rem;
flex-shrink: 0;
background: #F8F8F8;
}

.align-items-center {
align-items: center !important;
}

Tentei usar assim em uma tabela:

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th scope="col" class="col-3">
                Excluded candidate
            </th>
            <th scope="col" class="col-1">
                Votes to transfer
            </th>
            <th scope="col" class="col-3">
                Remaining candidates
            </th>
            <th scope="col" class="col col-width-1">
                Exc 1<br />total
                
            </th>
            <th scope="col" class="col col-width-1">
                Transfer <br />votes
            </th>
            <th scope="col" class="col col-width-1">
                Transfer % total
            </th>
            <th scope="col" class="col col-width-1">
                Excl 1 <br />total
            </th>
            <th scope="col" class="col col-width-1">
                Overall % total
            </th>
        </tr>
    </thead>
    <tbody>
    <tr class="exclusion-empty">
        <td colspan ="3"></td>
        <td colspan="2" class="lock-circle align-items-center ">
            <span>
                <i class="fa-regular fa-lock-keyhole lock-icon"></i>
            </span>
        </td>
        <td colspan ="3"></td>
    </tr>
    </tbody>
</table>
</div>

Isso está produzindo uma saída como esta:

insira a descrição da imagem aqui

html
Martin Hope
Gauravsa
Asked: 2025-02-04 09:07:53 +0800 CST
  • 5

Tenho várias linhas de boostrap como esta. Gostaria de ter ambos os cabeçalhos fixos em CSS. Mas sem sorte.

CSS

.sticky {
  top: 0 px;
}


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER</div>
    <div class="col-md-11">HEADER</div>
  </div><!-- row -->

  <div class="row sticky-top bg-white sticky-top1">
    <div class="col-md-1">HEADER2</div>
    <div class="col-md-11">HEADER2</div>
  </div><!-- row -->
  <!-- some data -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
</div>

html