Table Border Overlap

心已入冬 提交于 2019-12-13 06:27:57

问题


please see this example:

http://jsfiddle.net/qTjdX/

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?

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;
}


回答1:


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.

If you look at this demo:

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.

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>

With the following 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.



来源:https://stackoverflow.com/questions/13143445/table-border-overlap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!