html - 表格的 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;
}

Answer 2

为了达到预期的效果，您可以做的是：

1. 创建一个带有左/右边框的 div
2. 使用 CSS3 规则旋转 div 以产生这种效果

或者

1. 创建一个带有左/右边框的 div
2. 使用边界半径来达到预期的效果

我希望这会有所帮助，如果您愿意，我可以为您带来一些代码示例