Creating part table link with Divs

Asked

Viewed 27 times

-2

.table{
  }
  .row-table-head, .row-table a{
    display: grid;
    grid-template-columns: 50px 180px 70px;
    width: 300px;
    margin: auto;
  }
  .row-table-head{
    display: block;
  }
  .row-table a{
    text-decoration: none;
    color: #000;
  }
  .row-table a:hover .col-table{
    background-color: #d4ebff;
  }
  .row-table-head .col-table{
    padding: 2px 6px;
    border: 1px solid #ccc;
    background-color: #eee;
  }
  .row-table .col-table{
   padding: 4px 6px;
   border: 1px solid #ccc;
  }
<body align="center">

      <h1>IMPEXPROS</h1>

      <div class="table">
        <div class="row-table-head">
          <div class="col-table">LISTA TODOS USUARIOS</div>
        </div>
        <div class="row-table">
          <a href="http://www.google.com" target="_blank">
            <div class="col-table">9999</div>
            <div class="col-table">vitorpereira</div>
            <div class="col-table"><button type="button" name="excluir">excluir</button></div>
          </a>
        </div>
        <div class="row-table">
          <a href="http://www.google.com" target="_blank">
            <div class="col-table">9999</div>
            <div class="col-table">vitorpereira</div>
            <div class="col-table"><button type="button" name="excluir">excluir</button></div>
          </a>
        </div>
        <div class="row-table">
          <a href="http://www.google.com" target="_blank">
            <div class="col-table">9999</div>
            <div class="col-table">vitorpereira</div>
            <div class="col-table"><button type="button" name="excluir">excluir</button></div>
          </a>
        </div>
        <div class="row-table">
          <a href="http://www.google.com" target="_blank">
            <div class="col-table">9999</div>
            <div class="col-table">vitorpereira</div>
            <div class="col-table"><button type="button" name="excluir">excluir</button></div>
          </a>
        </div>


      </div>
</body>

When I click the delete button it redirects to google. how to take out only the part of the button? i put the end of the tag before the div of the button but modifies the whole layout.

html5 css3

  • your button is inside the tag <to>, then whenever you click it will redirect to google, put it off the tag <a href=""></a>, I couldn’t understand what you wanted the most.

  • when I put it out, the button jumps the line and it gets giant

  • you’re letting him into the <div>?

  • Yes, the test I did was to put the end of the </a> tag before the button div.

  • you put it that way <div class="col-table"><button type="button" name="delete">delete</button></div>, after the </a tag>?

  • Just like that

Show 1 more comment

1 answer

1


a way will be doing this way, putting a tag for each div, and creating a class "div-table" that is resposable by generating the table that before was what the tag did, soon after only stylize the colors of :Hover

CSS: 

.table{
  }
  .row-table-head, .div-table, .row-table{
    display: grid;
    grid-template-columns: 50px 180px 70px;
    width: 300px;
    margin: auto;
  }
  .row-table-head{
    display: block;
  }
  .row-table a{
    text-decoration: none;
    color: #000;
  }
  .row-table a:hover .col-table{
    background-color: #d4ebff;
  }
  .row-table-head .col-table{
    padding: 2px 6px;
    border: 1px solid #ccc;
    background-color: #eee;
  }
  .row-table .col-table{
   padding: 4px 6px;
   border: 1px solid #ccc;
  }

HTML:

<body align="center">

      <h1>IMPEXPROS</h1>

      <div class="table">

        <div class="row-table-head">
          <div class="col-table">LISTA TODOS USUARIOS</div>
        </div>

        <div class="row-table">
          <div class="div-table">
            <a href="" class="col-table">
                <div>9999</div>
            </a>
            <a href="" class="col-table">
                <div>vitorpereira</div>
            </a>                
            <div class="col-table">
              <button type="button" name="excluir">excluir</button>
            </div>
          </div>  
        </div>

      </div>

</body>

  • It worked!! That’s what I wanted, thank you Luan!

Browser other questions tagged html5 css3

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