CSS表:如何将动作按钮放在每行左侧

Question

我有这个默认的响应式Bootstrap表:

<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>

如何div在每行的右侧添加一个或容器,显示一些操作按钮,如删除行,更新图标等？它们应该默认隐藏.当我将鼠标悬停在一行上时,它应该显示在该行的右侧.不在表格内,但顶部和底部应与给定表格行的位置和高度对齐.

我怎么解决这个问题？如果不能单独使用CSS,使用jQuery/JavaScript或类似的解决方案可能没问题.

Answer 1

请尝试以下代码

$('tbody tr').hover(function(){
 $(this).find('td:last').show();
},function(){
  $(this).find('td:last').hide();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .table-bordered-custom{
    border:0px;
    border-top:initial;
  }
  
  .table-bordered-custom thead th {
    border-top:1px solid #ddd !important;
  }
  .table-bordered-custom tbody td:last-child {
    border:0 !important;
    display:none;
  }
  </style>
<table style="margin:10px" class="table table-bordered table-bordered-custom">
  
      <thead>
        <tr>
          <th width="10%">#</th>
          <th width="25%">First Name</th>
          <th width="25%">Last Name</th>
          <th width="25%">Username</th>
          <th style="border:0 !important" ></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td ><input type="button" value="X"> <input type="button" value="Edit"></td>
          
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td ><input type="button" value="X"> <input type="button" value="Edit"></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
          <td ><input type="button" value="X"> <input type="button" value="Edit"></td>
        </tr>
      </tbody>
    </table>

Answer 2

您可以使用悬停和绝对来允许标签从链接爬行到另一个:

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>

Answer 3

由于您需要表的完整宽度并且它应该是响应的,您可以将delete按钮保持在最后td(Username)并通过使用jQuery从悬停行中获取少量值来定位它.

$('.table-bordered-custom tr')
    .on('mouseenter', function () {
        var offset = $(this).offset();
        var top = offset.top;
        var width = parseInt($('.table-responsive').css('width'),10);
        var elem = $(this).find('span.delete');
        var parent_padding_left = parseInt($('.table-responsive').parent().css('padding-left'),10)
        
        elem.css({
            "top": top + "px",
            "left": (width + parent_padding_left) - 1 + "px",
            "display": "inline"
        });
    })
    .on('mouseleave', function () {
        $('span.delete').css({
            "display": "none"
        })
    });

span.delete {
    display: none;
    position: absolute;
    background: crimson;
    color: #fff;
    cursor: pointer;
    padding: 9px 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <section id="content">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="table-responsive">
                <table class="table table-bordered table-bordered-custom">
                    <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<span class="delete">x</span>

                            </td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat<span class="delete">x</span>

                            </td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter<span class="delete">x</span>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</div>