表格悬停边框颜色删除列线

Posted

技术标签:

【中文标题】表格悬停边框颜色删除列线【英文标题】:Table Hover Border Color Remove column lines 【发布时间】:2015-04-12 11:58:52 【问题描述】:

我需要修复此表,以便悬停点上方的线隐藏在该列中。假设底部中间的框悬停在上面,您将在其上方看到 3 行。我需要这些台词不要出现。

  <table>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
  </table>


    <script>
      $('td').on('mouseover mouseout', function()
             $(this).prevAll().addBack()
             .add($(this).parent().prevAll()
             .children(':nth-child(' + ($(this).index() + 1) +   
       ')')).toggleClass('hover');
         );

  </script>

table 
    table-layout:fixed;
    width:100%;
    height:300px;
    border-collapse:collapse;
      
 td 
    border:1px solid black;
 
.hover 
    border-color:#ef7c32; border-width:2px;

【问题讨论】:

【参考方案1】:

这会在一列单元格上切换悬停类:

  $('td').on('mouseover mouseout', function()
     var ix = $(this).parent().children().index(this);
     $('table tr').children().eq(ix).toggleClass('hover');
  );

第一个语句查找行内悬停单元格的索引。第二个在所有行的该索引处切换单元格上的类。

然后相应地设置样式:

.hover 
    border-top: none;
    border-bottom: none:

table tr:first-child .hover 
    border-top: 1px solid black;

table tr:last-child .hover 
    border-bottom: 1px solid black;

【讨论】:

以上是关于表格悬停边框颜色删除列线的主要内容,如果未能解决你的问题,请参考以下文章

CSS-Image边框发光时悬停单个颜色

使用带有 Material UI 的自定义主题在文本字段上指定悬停边框颜色

在html中 怎样改变表格边框线的颜色?

怎么把电子表格的边框变颜色啊

html这个表格上下左右边框颜色怎么设置?

如何从 HTML 表格中删除特定单元格?