用于表格的 Html 非直线边框衬里

Question

我想通过 Html/Css(如果需要的话使用 Javascript)制作一个表格，基本上看起来像这样:

如您所见，此表格中的每一行都有一个底部边框，从表格中的图像上方开始，然后向下延伸到其他列。有什么办法吗？ (也许有透明图像？)

Answer 1

您可以使用带有旋转的 psudo 元素来解决这个问题:

看看这个 jsfiddle http://jsfiddle.net/zRMLr/

您可能需要经常使用这些数字才能让它与您想要的任何东西一起工作。

我在此演示中使用的内容(无图像)但仅适用于 IE9+

html:

<table>
    <tr><td><div></div></td><td></td><td>Some sort of text</td></tr>
    <tr><td><div></div></td><td></td><td>Some sort of text</td></tr>
    <tr><td><div></div></td><td></td><td>Some sort of text</td></tr>
</table>

CSS:

table {
    width: 400px;
}

td:first-child {
    border-top: 1px solid black;
    width: 20px;
}

td:first-child:after {
    content: '';
    border-top: 1px solid black;
    display: block;
    width: 28px;
    height: 1px;
    float: left;
    position:relative;
    top: -5px;
    left: 24px;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* IE 9 */
    -moz-transform:rotate(45deg); /* Firefox */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
    -o-transform:rotate(45deg); /* Opera */
}

td:first-child div {
    width: 10px;
    height: 10px;
    background-color: red;
}

td:nth-child(2) {
    width: 14px;
}

td:last-child {
    border-bottom: 1px solid black;
}