[英]Table Border Overlap
请看这个例子:
我希望红色边框底部显示为1实线,但是现在黄色边框将其拆分为3.有没有办法让border-bottom优先? 像z-index的种类?
我试过边界崩溃:崩溃和边界崩溃:分开。
唯一有效的方法是如果我将红线做得更粗,但我希望它具有相同的宽度。
table {
width:100%;
border:1px solid blue;
border-collapse:separate;
}
th, td {
border:1px solid yellow;
padding:5px;
}
th {
background:black;
color:white;
}
th {
border-bottom:1px solid red !important;
}
td {
background:#efefef;
}
你遇到的问题是因为边框由四个独立的边组成,它们在角落处以45度角相交,并以各种方式圆化。 因此,具有底边框不同的颜色,以使双方的总会引起的边界断裂。
如果你看看这个演示:
div {
float: left;
border-width: 25px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
JS小提琴演示 。
你可以看到各种边框是如何相遇的,因为像素不能被细分,这导致角像素与其中一个边是相同的纯色,因此如果颜色不同,则为另一边的不同颜色与之相连。
要补偿你真正拥有的唯一选择是在th
使用嵌套元素:
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><div>col 1</div></th>
<th><div>col 2</div></th>
<th><div>col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
使用以下CSS:
table {
width:100%;
border:1px solid blue;
border-collapse:collapse;
}
th {
border-bottom: 2px solid yellow;
}
th div, td {
border: 1px solid red;
}
th div {
border-bottom-width: 0;
}
JS小提琴演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.