13

名前と値の 2 つの列を持つ基本的なテーブルがあります。テーブルの各行を、値のサイズに基づいて幅の適切なパーセンテージでシェーディングしたいと思います (基本的に横向きのヒストグラムを作成するためです!)。設定する適切なパーセンテージを計算するコードを書くことはできますが、実際に各行を適切にシェーディングする CSS を理解することはできません。行全体をシェーディングできるようですが、パーセンテージはできません。本当？

価値のあることとして、私は Twitter Bootstrap を使用しており、必要に応じて jQuery も使用できます。これは Chrome でのみ実行されるため、CSS3 & Webkit のみで問題ありません。HTMLは次のとおりです。

<table class="table">
  <tbody class="lead">              
    <tr> 
      <td>
        Joe
      </td>
      <td>
        10
      </td>
    </tr>              
    <tr> 
      <td>
        Jane
      </td>
      <td>
        20 
      </td>
    </tr>              
    <tr> 
      <td>
        Jim
      </td>
      <td>
        2
      </td>
    </tr>
  </tbody>
</table>

これを実現するためのヒントはありますか？この質問が理にかなっていることを願っています。

4

2 に答える 2

28

線形グラデーションを使用できます。

パーセンテージが 40% の場合:

table{
    background: -webkit-gradient(linear, left top, right top, color-stop(40%,#F00), color-stop(40%,#00F));
    background: -moz-linear-gradient(left center, #F00 40%, #00F 40%);
    background: -o-linear-gradient(left, #F00 40%, #00F 40%);
    background: linear-gradient(to right, #F00 40%, #00F 40%);
}

デモ

したがって、JavaScript では、

var percentage=40,
    col1="#F00",
    col2="#00F";
var t=document.getElementById('table');
t.style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
t.style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

デモ

これを各行に異なる方法で適用する場合:

var col1="#F00",
    col2="#00F";
var els=document.getElementById('table').getElementsByTagName('tr');
for (var i=0; i<els.length; i++) {
    var percentage = Number(els[i].getElementsByTagName('td')[1].firstChild.nodeValue);
    els[i].style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
    els[i].style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
    els[i].style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
    els[i].style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
}

問題は、Firefox と Opera では背景を に設定するとtrうまく機能しますが、Chrome では各セルにグラデーションが適用されることです。

この問題は、次のコードを追加して修正できます ( https://stackoverflow.com/a/10515894を参照)。

#table td {display: inline-block;}

デモ

于 2012-08-18T18:42:19.377 に答える
12

グラデーションを使用する必要はありません。最初に、行を陰影付けする色で単純な画像ファイルを作成します。私の場合、.png完全に黒く着色された を作成しました (black.png以下の例)。background-image次に、 プロパティとプロパティを使用してbackground-size、行の適切な部分に色を付けます。

例、HTML:

<table cellspacing = "0px">
    <tr class = "row"><td>Hello Hello</td><td>Bye Bye</td></tr>
</table>

CSS:

.row {
    background-color: white; /*fallback color*/
    background-image: url(black.png);
    background-size: 75% 100%; /*your percentage is the first one (width), second one (100%) is for height*/
    background-repeat: no-repeat;
    color: rgb(0, 140, 200);
    font-weight: bold;
}

結果：

結果

あなたの例でこれを自動化する方法の簡単なスニペットを次に示します。

var tbl = document.getElementsByClassName("table")[0];
var rws = tbl.rows;
for(var i = 0; i < rws.length; i ++) {
    var percentage = parseInt(rws[i].getElementsByTagName("td")[1].innerHTML, 10);
    rws[i].style.backgroundImage = "black.png";
    rws[i].style.backgroundSize = percentage + "%" + " 100%";
    rws[i].style.backgroundRepeat = "no-repeat";
    rws[i].style.color = "rgb(0, 140, 200)";
}

小さなデモ:パーセンテージ幅 bg color (非グラデーションベース) .

それが役に立ったことを願っています！

于 2012-08-18T19:37:16.283 に答える