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> 

Answer 4

imho这么多困难的答案，我会用一个简单的方法做到这一点。

在这个JSFIDDLE中，我只是在每行中添加一个display:none单元格，其中包含你想要显示的内部和没有边框的内容，因此它不会在表格内部显示，然后：

  tr:hover .buttom {display:table-cell;}

可以做到这一点。

并且不知道为什么我有这种感觉这可能不是你想要的（赏金问题这么多的javascript答案等等）......但是尽管我重读了这个问题。

请原谅我可怜的英语

编辑 ：顺便说一句，如果你真的想要在“响应”表格之外的按钮，那么你有你的边界，它很容易完成绝对定位，但你不应该真的这样做。 一旦表格达到窗口宽度的100％，那么用户可能无法看到所需的那些按钮。

编辑：当“buttom”单元格显示为none时，它将不会采用我们需要的固定的40px宽度（或者一旦你将所有的buttoms放在里面你需要的任何宽度）所以我将宽度设置为.X0 insteed这个元素是有（但没有边框，样式或内容），并将使所有列的宽度相同。

然后我只是覆盖一些搞乱表格的引导样式。 （请注意以下内容：

.table-responsive {border:0; padding:2px;}
.table-bordered {border:0;} 

可能会影响您的所有项目，因此请确保您只覆盖此表中的样式而不是其他样式。 使用类似的东西：

.container-of-the-table-with-buttoms .table-responsive {border:0; padding:2px;}

小提琴已更新

Answer 5

我快速编写了一些可能有助于您入门的代码：

HTML

<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 class="actionbuttons"></div>

CSS

.actionbuttons
{
    position:absolute;
    width: 150px;
    height: 30px;
    background: #f00;
    display:none;
}

jQuery代码

$('tbody tr').on('mouseover',function(){
var rowPosition = $(this).position();
    var targetPosition = {
        top: rowPosition.top,
        left: rowPosition.left + $(this).width()
    }
    $('.actionbuttons').css(targetPosition);
    $('.actionbuttons').show();
});

$('tr').on('mouseout',function(){
    $('.actionbuttons').hide();
});

小提琴

Answer 6

尝试将onmouseover和onmouseout属性添加到表的每一行。 使用每个按钮使按钮可见和不可见。

<tr onmouseover="
    *insert code to make button for this row visible*        
" onmouseout="
    *insert code to make button for this row invisible*
">
    *insert table data for this row*
</tr>

Answer 7

你也可以用CSS3 transform ， transition和最终FontAwesome来获得：

纯CSS3解决方案（ 没有 JavaScript， 没有图像）

 td { background: white; } th.buttons { display: none; } td.buttons { border: none !important; padding: 0px !important; z-index: -1; transform: translateX(-100%); transition: transform .5s ease 0s, z-index .1s ease 0s; } tr:hover td.buttons { transform: translateX(0%); z-index: 1; transition: transform .5s ease 0s, z-index .01s ease .5s; } .buttons ul { text-align: left; margin: 0; padding: 0; } .buttons ul li { display: inline-block; min-height: 100%; text-align: center; } .buttons a { border-radius: 2px; color: red; display: block; font-size: 16px; line-height: 100%; min-width: 5em; text-decoration: none !important; transition: background 0.3s ease 0s; } .buttons i { display: block; font-size: 1.5em; } .buttons span { font-family: sans-serif; font-size: 0.625em; text-transform: uppercase; } li:hover a { background: red; color: white; z-index: 1; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <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 class="buttons"></th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td class="buttons"> <ul> <li><a href="javascript:alert('update row...');"><i class="fa fa-pencil-square-o"></i><span>update</span></a> </li><!-- --><li><a href="javascript:alert('delete row...');"><i class="fa fa-times"></i><span>delete</span></a> </li> </ul> </td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td class="buttons"> <ul> <li><a href="javascript:alert('update row...');"><i class="fa fa-pencil-square-o"></i><span>update</span></a> </li><!-- --><li><a href="javascript:alert('delete row...');"><i class="fa fa-times"></i><span>delete</span></a> </li> </ul> </td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td class="buttons"> <ul> <li><a href="javascript:alert('update row...');"><i class="fa fa-pencil-square-o"></i><span>update</span></a> </li><!-- --><li><a href="javascript:alert('delete row...');"><i class="fa fa-times"></i><span>delete</span></a> </li> </ul> </td> </tr> </tbody> </table> </div> 

注意： <li>通过HTML注释（ <!-- --> ）连接，以防止inline-block间距问题 。

Answer 8

用这个：

$('tr').hover(function(){
    $('div').removeClass('hide');
    $('div').addClass('open');
})

CSS：

.open {    
background: yellow;
height: 300px;    
position: absolute; 
top: 0;
left: -500px;    
width: 500px;
opacity: 1;    
-webkit-transition: all 0.7s ease-out;
   -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
     -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}
.close {
background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0;
    left: -500px;    
    width: 500px;
    opacity: 1;    
    -webkit-transition: all 0.7s ease-in;
       -moz-transition: all 0.7s ease-in;
        -ms-transition: all 0.7s ease-in;
         -o-transition: all 0.7s ease-in;
                transition: all 0.7s ease-in;
}

希望它有效！