2

テーブル内の特定のテーブル セルに矢印を追加できるようにする必要があります。各表のセルには境界線の色があり、矢印を一致させたい。これが可能かどうかは誰でも知っています。

これが私の基本的なテーブルです

そして、私はそれを次のように変えたいと思います。セルの右側にある境界線のような矢印に注目してください。縦の境界線が削除されました。

また、右側の列の色が異なる場合は、これも反映する必要があります。この例の画像が示すように

これが CSS だけで可能かどうかは誰にもわかりませんか? 現時点では、通常のテーブルを作成し、各セルの背景色と境界線のスタイルを設定しています。

矢印の列を追加する必要はありませんが、これを行う必要がある場合はそれを行いますが、矢印の境界線をどのように色付けできるかわかりません。ユーザーは実行時にこれらを選択できるため、無限の色に対処できる必要があります。

注: 表のセルのサイズがわからないため、動的なものが必要になるか、パーセンテージを使用する必要があります。

編集: 下の新しい画像の最初の列のように、矢印が左に移動しやすくなれば幸いです...

4

3 に答える 3

0

このページを見てください：

http://css-tricks.com/snippets/css/css-triangle/

適切な説明があれば、まさにあなたが望むものになる可能性があります

于 2013-11-05T12:55:10.350 に答える
0

これはあなたの役に立ちますか？それがどれほど適応性があるかはわかりませんが、有利なスタートを切ることができるかもしれません;)

申し訳ありませんが、私のコーディングはおそらくひどいものです:/

CSS:

TABLE {
margin:0;
padding:0;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:left;
width:600px;
border:0 none;
border-collapse:collapse;
}
TH, TD {padding:4px; border-bottom:1px solid #fff; background-size:100%;}

tr:nth-child(odd) { background:#ddeff3; }
tr:nth-child(even) { background:#92cddc;}
TH {border: 1px solid #fff; background-color: #548dd4;}

.arrow {position: relative;}
.arrow:after {
content: '';
position: absolute;
top: 0px;
right: -10px;
width: 0;
height: 0;
border: 11px solid transparent;
border-left: 12px solid #ddeff3;
z-index:2;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
right: -11px;
width: 0;
height: 0;
border: 11px solid transparent;
border-left: 12px solid #fff;
z-index:1;
}

tr:nth-child(odd) .arrow:after {border-left: 12px solid #ddeff3;}
tr:nth-child(odd) .arrow:before {border-left: 12px solid #fff;}
tr:nth-child(even) .arrow:after {border-left: 12px solid #92cddc;}
tr:nth-child(even) .arrow:before {border-left: 12px solid #fff;}

HTML:

<table>
  <tr>
    <th scope="col">Template</th>
    <th scope="col">Measure</th>
    <th scope="col">Number</th>
  </tr>
  <tr>
    <td class="arrow">Subcontractor/Contract Feedback</td>
    <td class="arrow">Health and Safety</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="arrow">Subcontractor/Contract Feedback</td>
    <td class="arrow">Quality system</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="arrow">Subcontractor/Contract Feedback</td>
    <td class="arrow">Staff Performance</td>
    <td>1</td>
  </tr>
</table>

FIDDLE はこちら: http://jsfiddle.net/takuhii/6hbCv/1/

于 2013-11-05T14:06:58.757 に答える