CSS table: How to position action buttons left to each row


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

I've this default responsive Bootstrap table:

<div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</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>

How can I add a div or container to the right of each row showing some action buttons, like delete row, updating icon etc.? They should be hidden by default. When I mouse over a row, it should be displayed right to the row. Not inside the table, but the top and bottom should be aligned with the position and height of the given table row.

enter image description here

How can I solve this? If it cannot be done using CSS alone, a solution using jQuery/JavaScript or like could be okay.



Solution :

you may use hover and absolute to allow also tab crawling from a link to another :

td,th {
  border:1px solid;
}
table {
  margin:1em;
}
tr> :last-child {
  width:1em;
  vertical-align:top;
  border:none;
}
:last-child a { 
  text-align:center;  
  position:absolute;
  left:-9999px;
  display:inline-block;
  width:1em;
  color:white;
  text-decoration:none;  
  background:red;
}
tr:hover td:last-child a,td a:focus {
  left:auto;
}
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td><a href>X</a></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td><a href>X</a></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td><a href>X</a></td>
      </tr>
    </tbody>
  </table>
</div>


    CSS Howto..

    How to show a region on a image with CSS

    MVC How make a logout button

    How to notify view from model to change a value in backbone

    How to make Asp.net Gridview header and first column frezee?

    How can I make a color background that expands out of the 960 grid system?

    How to fix the shadow on my menu, Fiddle example shown

    How to restrict the css star selector * to a class and all decendants?

    How to create a table with fixed layout?

    How can I use CSS to select the “a” tag in the following layout?

    How can I put a graphic marker next to an item using pure CSS?

    How to add a:hover css function to this code?

    How to check css in unit test

    How do i hook media queries to screen resolution?

    How to check image is visible (Webdriver)

    How to make sure that different severity Toasters are shown differently?

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    how to link css files in organization github pages

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    How to link a table cell?

    how to get the site to not collapse with css

    How to organize CSS - table columns

    How to eliminate the padding in the nav menu from Refinery CMS?

    Javascript/CSS slideshow: Using transparencies highlights flaws I don't know how to fix

    Selected text showing oversized selection area

    How to bring all elements down with a header slide up/down?

    How can I animate this?

    How can I use :before property to create a square before a span

    How do I prevent this double hover?

    How to make table borders invisible with CSS

    jquery image preview on hover - how to set fixed position?