Add image thumbnail and toggle switch to table

Asked

Viewed 86 times

0

Hello, everyone. I follow my saga of editing a boostrap template, with a lot of learning but with a lot of head beat on the wall rs. I would like to know how to add an image thumbnail in this table of my site, in the "product name" column items, every time I tried the image craps the table all kk. Also, I would like to add a toggle switch bottom of "yes and no" in the "I accept" column, but every time I enter the code, only a normal checkbox appears. Link to my website: http://tratspay.com/app/co-producoes.html

<!-- Main content -->
<div class="content">
  <div class="info-box">

    <p>Abaixo você pode ver em quais produtos você recebe algum valor de co-produçções e pode inclusive aceitar ou recusar pedidos relacionados a isso.</p>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>

            <th scope="col">Nome do Produto</th>
            <th scope="col">Data Limite</th>
            <th scope="col">Tipo</th>
            <th scope="col">Comissão</th>
            <th scope="col">Aceito</th>
          </tr>
        </thead>
        <tbody>
          <tr>

            <td>Produto A</td>
            <td>12/12/12</td>
            <td>Co-Produtor</td>
            <td>5%</td>
            <td> Sim </td> 
          </tr>
          <tr>

           <td>Produto A</td>
            <td>12/12/12</td>
            <td>Co-Produtor</td>
            <td>5%</td>
            <td> Sim </td> 
          </tr>
          <tr>

           <td>Produto A</td>
            <td>12/12/12</td>
            <td>Co-Produtor</td>
            <td>5%</td>
            <td> Sim </td> 
          </tr>
          <tr>

          <td>Produto A</td>
            <td>12/12/12</td>
            <td>Co-Produtor</td>
            <td>5%</td>
            <td> Sim </td> 
          </tr>
          <tr>

           <td>Produto A</td>
            <td>12/12/12</td>
            <td>Co-Produtor</td>
            <td>5%</td>
            <td> Sim </td> 
          </tr>
        </tbody>
      </table>
    </div>


        </div>
      </div>
    </div>
  </div>
</div>
<!-- /.content -->

html twitter-bootstrap boot

  • What’s wrong with the picture on the table? I tried it here... check out the link http://prntscr.com/mri9qv About Checkbox I believe you are copying the code from somewhere, but you don’t know how to use it correctly. I think you should split the question in two, first try to focus on the image and what the problem is. Then you post the table already with the image and ask about the Switch

  • How did you do? Here I can’t resize the image inside the column. I apologize already if I’m asking some beast kk question.

  • The picture I managed to put here, it was silly of me, lack of attention rs.

1 answer

0


Follow the template. Just set in css a Width and leaves the height in the self that facilitates, or else puts the two measures in hand...

About the Toggle you must be letting something go... I simulated using a Button of the Bootstrap itself that you are wearing and no problem...

img {
  width: 50px;
  height: auto;
}
.table td, .table th {
    vertical-align: middle !important;
}
<link rel="stylesheet" href="http://tratspay.com/app/dist/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://tratspay.com/app/dist/css/style.css" />


  <!-- Main content -->
  <div class="content">
    <div class="info-box">

      <p>Abaixo você pode ver em quais produtos você recebe algum valor de co-produçções e pode inclusive aceitar ou
        recusar pedidos relacionados a isso.</p>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>

              <th scope="col">Nome do Produto</th>
              <th scope="col">Data Limite</th>
              <th scope="col">Tipo</th>
              <th scope="col">Comissão</th>
              <th scope="col">Aceito</th>
            </tr>
          </thead>
          <tbody>
            <tr>

              <td>
                <img src="https://placecage.com/100/100">
                Produto A
              </td>
              <td>12/12/12</td>
              <td>Co-Produtor</td>
              <td>5%</td>
              <td>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  Single toggle
                </button>
              </td>
            </tr>
            <tr>

              <td>Produto A</td>
              <td>12/12/12</td>
              <td>Co-Produtor</td>
              <td>5%</td>
              <td> Sim </td>
            </tr>
            <tr>

              <td>Produto A</td>
              <td>12/12/12</td>
              <td>Co-Produtor</td>
              <td>5%</td>
              <td> Sim </td>
            </tr>
            <tr>

              <td>Produto A</td>
              <td>12/12/12</td>
              <td>Co-Produtor</td>
              <td>5%</td>
              <td> Sim </td>
            </tr>
            <tr>

              <td>Produto A</td>
              <td>12/12/12</td>
              <td>Co-Produtor</td>
              <td>5%</td>
              <td> Sim </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
  <!-- /.content -->

  • 1

    Thanks a lot for the strength @hugocsl. Thanks a lot, the toogle I managed to put too with your help.

  • @Igorrosa without problems my friend how good that solved!

Browser other questions tagged html twitter-bootstrap boot

You are not signed in. Login or sign up in order to post.