CSS pour définir la couleur d'arrière-plan pour juste un pourcentage de la largeur d'une ligne de la table

J'ai une table de base avec deux colonnes: le nom et la valeur. J'aimerais ombre chaque ligne de la table un pourcentage approprié de la largeur en fonction de la taille de la valeur (afin de créer un mouvement latéral de l'histogramme!). Je peux écrire le code qui permet de calculer le pourcentage à définir, mais je ne peux pas comprendre le CSS à fait de l'ombre chaque ligne de manière appropriée. Il semble que l'ensemble de la ligne peut être à l'ombre, mais pas un pourcentage. Est-ce vrai?

FWIW, je suis en utilisant Twitter Bootstrap et je peux utiliser jQuery trop si besoin. Cela ne fonctionne que sur Chrome donc CSS3 & Webkit seulement est très bien! Voici le code 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>

Des conseils sur la façon de faire cela? Espérons que cette question a du sens.

source d'informationauteur tonic

  1. 23

    Vous pouvez utiliser linéaire dégradés de.

    Si le pourcentage est de 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%);
}

    Démo

    Donc, en 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+"%)";

    Démo

    Si vous voulez l'appliquer à chaque ligne différemment:

    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+"%)" ;
}

    Le problème est que le réglage de l'arrière-plan de la tr fonctionne bien sur Firefox et Opera, mais sur Chrome le dégradé est appliqué à chaque cellule.

    Ce problème peut être résolu en ajoutant ce code (voir https://stackoverflow.com/a/10515894):

    #table td {display: inline-block;}

    Démo

  2. 10

    Pas besoin d'utiliser des dégradés. Tout d'abord, créer un simple fichier image avec la couleur que vous souhaitez à l'ombre de votre ligne. Dans mon cas, j'ai créé un .png qui est entièrement de couleur noire (black.png dans l'exemple ci-dessous). Maintenant, il suffit d'utiliser la background-image et background-size propriétés de la couleur de la partie appropriée de la ligne.

    Exemple, 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;
}

    Résultat:

    CSS pour définir la couleur d'arrière-plan pour juste un pourcentage de la largeur d'une ligne de la table

    Voici un extrait de simple sur la façon d'automatiser ce pour votre exemple:

    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)";
}

    Petite démo: pourcentage de la largeur de bg couleur (non dégradé).

    J'espère que contribué à!