悬停时向表格单元格添加左边框

用户1234

我试图以这样一种方式在文本的左侧添加边框,即当我将鼠标悬停在行上时,第一个单元格的边框会突出显示,并且用户知道他们所在的行。

这里是一个小提琴什么,我到目前为止有:

#table {
  border: 1px solid#e9e9e9;
}
tr:hover {
  background-color: #e9e9e9;
}
tr:hover > td:first-child {
  border-left: 2px solid #1B8645;
}
<table id="table">
    <tr>
        <th>Status</th>
        <th>Price</th>
        <th>Address</th>
    </tr>

	<tbody>
        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>
    </tbody>
</table>

但是,从小提琴中可以看出,当我将鼠标悬停在行上时,文本会被稍微压一下,并使悬停显得凌乱和扭曲。我试图以这样一种方式设置一行,即当鼠标悬停时,不应将文本推开,并且表格内容也不应移动。

这是将边框应用于悬停的方式:

tr:hover >  td:first-child {
    border-left: 2px solid #1B8645;
}
斯拉兹科夫

您应该添加一条透明的色线以确保没有悬停状态

tr>td:first-child{
    border-left: 2px solid transparent;
}

http://jsfiddle.net/serGlazkov/eq70r3zb/1/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在折叠单元格边框并显示浮动图片的同时向表格添加边框

来自分类Dev

打印时无法显示表格和单元格边框

来自分类Dev

向表格单元格添加随机值

来自分类Dev

使用javascript向表格添加新单元格

来自分类Dev

在第一个单元格悬停时覆盖表格单元格

来自分类Dev

使用表格边框的类时,如何使某些表格单元格边框消失?

来自分类Dev

表格周围边框,但单元格周围

来自分类Dev

表格单元格的边框颜色变化

来自分类Dev

表格单元格的边框颜色变化

来自分类Dev

为什么在添加单元格时表格视图中的单元格会调整大小?

来自分类Dev

键入一个空的Microsoft Word单元格(表)时,该单元格的左边框开始向左移动,为什么?

来自分类Dev

有表格边框,但没有单元格边框

来自分类Dev

使表格单元格的边框为表格宽度的100%

来自分类Dev

使表格单元格的边框为表格宽度的100%

来自分类Dev

在表格中添加列标题并为单元格加上边框

来自分类Dev

添加表格,tr和单元格不同的特定边框样式和间距

来自分类Dev

当表格单元格的垂直和水平边框具有不同的颜色时出现问题

来自分类Dev

如何在悬停时突出显示整个表格单元格?

来自分类Dev

将鼠标悬停在表格单元格上时更改BODY背景颜色

来自分类Dev

Matlab:向单元格添加行

来自分类Dev

向单元格中添加字母

来自分类Dev

向邻居单元格添加值

来自分类Dev

向单元格中添加字母

来自分类Dev

在悬停CSS上添加仅左边框

来自分类Dev

在悬停CSS上添加仅左边框

来自分类Dev

iOS-向表格单元格添加水平填充

来自分类Dev

向动态创建的表格中的单元格添加点击功能-JavaScript

来自分类Dev

如何向MS Word页脚中的表格单元格添加页码引用

来自分类Dev

如何使用Google Apps脚本向电子表格单元格添加链接

Related 相关文章

  1. 1

    在折叠单元格边框并显示浮动图片的同时向表格添加边框

  2. 2

    打印时无法显示表格和单元格边框

  3. 3

    向表格单元格添加随机值

  4. 4

    使用javascript向表格添加新单元格

  5. 5

    在第一个单元格悬停时覆盖表格单元格

  6. 6

    使用表格边框的类时,如何使某些表格单元格边框消失?

  7. 7

    表格周围边框,但单元格周围

  8. 8

    表格单元格的边框颜色变化

  9. 9

    表格单元格的边框颜色变化

  10. 10

    为什么在添加单元格时表格视图中的单元格会调整大小?

  11. 11

    键入一个空的Microsoft Word单元格(表)时,该单元格的左边框开始向左移动,为什么?

  12. 12

    有表格边框,但没有单元格边框

  13. 13

    使表格单元格的边框为表格宽度的100%

  14. 14

    使表格单元格的边框为表格宽度的100%

  15. 15

    在表格中添加列标题并为单元格加上边框

  16. 16

    添加表格,tr和单元格不同的特定边框样式和间距

  17. 17

    当表格单元格的垂直和水平边框具有不同的颜色时出现问题

  18. 18

    如何在悬停时突出显示整个表格单元格?

  19. 19

    将鼠标悬停在表格单元格上时更改BODY背景颜色

  20. 20

    Matlab:向单元格添加行

  21. 21

    向单元格中添加字母

  22. 22

    向邻居单元格添加值

  23. 23

    向单元格中添加字母

  24. 24

    在悬停CSS上添加仅左边框

  25. 25

    在悬停CSS上添加仅左边框

  26. 26

    iOS-向表格单元格添加水平填充

  27. 27

    向动态创建的表格中的单元格添加点击功能-JavaScript

  28. 28

    如何向MS Word页脚中的表格单元格添加页码引用

  29. 29

    如何使用Google Apps脚本向电子表格单元格添加链接

热门标签

归档