html tbody边框,tbody边框呈现问题

我正在使用angularJS来ng重复搜索结果的数量，以便在表中显示它们。每个结果由许多表格行和列组成，因此ngRepeat正在重复容器以包含完整的结果。tbody边框呈现问题

我遇到的问题是围绕每个tbody的边框造型。每个边框将在鼠标悬停时从透明转换为指定的颜色，但是由于默认的border-collapse: collapse;属性，边框的边缘会出现重叠，这使得它们显得截止，并且通常会断开。如果我使用border-collapse: separate;和display: block;，我可以使边框显示正确，但是我失去了表格通常提供的很好的水平间距。

我的目标是让每个tbody拥有自己的边框，以便在鼠标悬停时转换颜色，同时保持表格顶部显示的th标签的适当水平间距。

这里是什么，我有一个简化版：

HTML：

Heading 1Heading 2Heading 3

CSS：

tbody {

transition: border-color 0.6s ease;

-webkit-transition: border-color 0.6s ease; /* Safari */

border 4px solid black;

}

tbody:hover {

border-color: red;

}

在此先感谢。

究竟哪个尴尬？我可以看到几个。我制作了[jsfiddle](http://jsfiddle.net/z72pL/5/)，在Chrome上看起来不错，但在其他各种浏览器上有不同的问题。 –

感谢您的回复，以及jsfiddle，因为它更清楚地说明了这个问题。请注意，每个表格边界的四边不会同时淡入和淡出。有时鼠标悬停的转换正在应用，而其他时间则不会。我的目标是将鼠标上的转换均匀地应用到特定tbody的各个方面，就像它通常那样。 –

html tbody边框,tbody边框呈现问题相关推荐

CSS3边框背景-边框背景(-border-image)
另一个令人兴奋的新特征是边框图片.有了这项功能您可以定义一个图像被用来代替正常的边框的一个组成部分.这项功能实际上是分成了几个属性:边框和边框角的形象.这两个值是: border-image: bor ...
UIButton设置圆角和边框及边框颜色
为什么80%的码农都做不了架构师?>>> UIButton设置圆角和边框及边框颜色 [box.actionButton.layer setMasksToBounds:YES]; ...
xlwt边框与边框颜色
边框效果边框值的意义细实线:1,小粗实线:2,细虚线:3,中细虚线:4,大粗实线:5,双线:6,细点虚线:7 大粗虚线:8,细点划线:9,粗点划线:10,细双点划线:11,粗双点划线:12,斜点划 ...
CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...
div html隐藏边框,div 边框原来有这么多种设置方法
在HTML前端开发中,有数次会对配置边框. 这里给DIV加一个边框方式教程,实现div边框花色.通过CSS border花式属性完成加边框. 下列是各类给DIV加差距边框实例和技能花样教程.htm ...
html中边框与边框距离,css边框border与margin属性
CSS边框属性: border不能分别定义4个边框的宽度,颜色和样式,只能统一定义,不可以对四个边设置不同的值,和margin与padding是不同的(后两者可以分别定义四个边的值). border- ...
css 科技边框_CSS3 边框
CSS3 边框 CSS3 边框通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. 在本章中,您将学到以下边框属性:borde ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
html 画圆的阴影,CSS3(1)---圆角边框、边框阴影
圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了C ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...

html tbody边框,tbody边框呈现问题

html tbody边框,tbody边框呈现问题相关推荐

最新文章

热门文章