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. 境界半径を使用して目的の効果を得る

これがお役に立てば幸いです。よろしければ、コードのサンプルをお持ちします。