表边框重叠 [英] Table Border Overlap

问题描述

请参阅以下示例：

http：// jsfiddle .net / qTjdX /

我想让红色边框底部显示为1实线，但现在黄色边框将其分割为3有什么办法让边界底部优先吗？像z-index的排序？

I want the red border-bottom to show as 1 solid line, but right now the yellow border is splitting it up in 3. Is there any way to have the border-bottom take precedence? Like a z-index of sorts?

我已经尝试过border-collapse：collapse和border-collapse：separate。

I have tried both border-collapse:collapse and border-collapse:separate.

工作是如果我让红线更厚，但我想它有相同的宽度。

The only thing that is working is if I make the red line thicker, but I want it to have the same width.

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度角在角落处相遇，并以各种方式四舍五入。因此，底边界与边的颜色不同会始终导致边框破裂。

The problem you're having is because the border is composed of four separate sides, which meet at 45 degree angles at the corners, which is rounded in various ways. So having a bottom-border a different color to that of the sides will always cause the borders to break.

如果你看这个演示：

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 Fiddle demo 。

您可以看到各种边框的相遇，因为像素无法细分为到角像素是与其中一个边相同的纯色，因此如果颜色不同，则将不同的颜色移动到它所连接的其他侧。

You can see how the various borders meet, because a pixel can't be subdivided this leads to the corner-pixels being the same solid colour as one of the sides and therefore a different colour, if the colours are different, to the other side with which it connects.

要补偿您真正拥有的唯一选项是在 th 中使用嵌套元素：

To compensate the only option you really have is to use a nested element within the 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>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</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 Fiddle demo 。

这篇关于表边框重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！