表格的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. 使用border radius来获得所需的效果
  

我希望这有帮助，如果您希望我能为您带来一些代码示例