CSS如何实现细边框TABLE,并且其单元在鼠标悬停时四周边框变色?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

CSS如何实现细边框TABLE,并且其单元在鼠标悬停时四周边框变色?

2016-06-06 15:41:05 2021 1

html代码

<table id="itemKey">
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>

css代码

#itemKey 
{
    width: 100%;
    border-collapse: collapse;
}
#itemKey td 
{
    height: 40px;
    background-color: #141414;
    border: solid 1px black;
}

#itemKey td:hover
{
    border-color: #656565;
}

因为要让表格内部的边框与外边框一致,设置了border-collapse:collapse; 结果是鼠标悬停时,表格单元的只有部分边框变色。
请问如何才能解决screenshot

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:28:47

    试试这个

    table, td {
        border: 1px inset black;
        border-collapse: collapse;
    }
    td:hover {
        border: 1px solid red;
    }
    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57819浏览量 回答数 19

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 51267浏览量 回答数 43

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47709浏览量 回答数 19

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 147633浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47794浏览量 回答数 15

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 309530浏览量 回答数 251

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81567浏览量 回答数 13

21

回答

【Java学习全家桶】1460道Java热门问题,阿里百位技术专家答疑解惑

管理贝贝 2018-05-31 13:57:45 49007浏览量 回答数 21

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 48303浏览量 回答数 46

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 49602浏览量 回答数 3
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载