1

ガントチャートのようなものを作成する必要があります。これは私がすでに達成していることです：http ：//tinypic.com/view.php？pic = 160ecxu＆s=6 。

この場合、私はテーブルを操作しています。画像でわかるように、1行目、2行目、最後の行にグラデーションがあります。私はすべての緑の細胞のためにそれをしなければなりません。最後の行でわかるように、グラデーションがありますが、colspan = 11を作成したため、各列を区切る白い線が消えました。それが私が似たようなものを作るために見つけた唯一の方法です

ここにいくつかのコードがあります

HTML

    <tr>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
    </tr>
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
    </tr>
...
...
...
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
       <div class="group">
           <td class="selected" colspan="11"></td>
       </div>
    </tr>

およびCSS

table tr td.selected{
   /*the gradient code here*/
}

/* I TRIED TO SET A STYLE FOR THE GROUP BUT WITHOUT ANY RESULTS*/
table tr div.group{
    background-color:red;   
}

白い線とグラデーションを維持するためのヒントはありますか？

4

2 に答える 2

3

<td>'を11個の単一要素に分割し、CSSでとを使用background-sizeしbackground-positionて、グラデーションが11個の要素にまたがっているように見えるようにする必要があります。

フィドルの例： ここ。

HTMLコードは次のようになります。

<tr>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days selected colspan-11 col-1">&nbsp;</td>
   <td class="days selected colspan-11 col-2">&nbsp;</td>
   <td class="days selected colspan-11 col-3">&nbsp;</td>
   <td class="days selected colspan-11 col-4">&nbsp;</td>
   <td class="days selected colspan-11 col-5">&nbsp;</td>
   <td class="days selected colspan-11 col-6">&nbsp;</td>
   <td class="days selected colspan-11 col-7">&nbsp;</td>
   <td class="days selected colspan-11 col-8">&nbsp;</td>
   <td class="days selected colspan-11 col-9">&nbsp;</td>
   <td class="days selected colspan-11 col-10">&nbsp;</td>
   <td class="days selected colspan-11 col-11">&nbsp;</td>
</tr>

1つの代わりに、要素の数である<td colspan="11">11の<td style="colspan-11 col-n">要素がありnます。

CSSでは、11個の要素を合わせた大きさの背景グラデーションサイズを作成する必要があります。これは11 * width + 10 * border width、エリア内に境界線が10個しかないためです。この状況では、私<td>の幅は30ピクセルで、境界線の幅は2ピクセルなので、背景を11 * 30px + 10 * 2px = 350px広くする必要があります。background-sizeこれはCSSで行うことができます。

td.colspan-11 {
    background-size: 350px 1px;
}

次に、背景のグラデーションを各要素に正しく配置して、1つの大きなグラデーションとして表示する必要があります。'番目の要素についてはn、グラデーションn * (width + border width)を左に移動する必要があります。これは、次のコードを使用して行われます。

td.colspan-11.col-1 {
    background-position: 0 0;
}

td.colspan-11.col-2 {
    background-position: -32px 0;
}

td.colspan-11.col-3 {
    background-position: -64px 0;
}

/* etc. */

完全なコードと実際の例については、私のFiddleを参照してください。

于 2012-06-19T11:25:49.127 に答える
0

私が考えることができる唯一のことは、すべて醜いです：

  • 別のテーブルを上に重ねて、境界線を表示します
  • 背景が表示されるdivをオーバーレイしますが、境界線が表示されるように透明度を設定します
  • セル間で背景を分割します（またはグラデーションがありません）
于 2012-06-19T11:14:16.043 に答える