CSS для установки цвета фона только в процентах от ширины строки таблицы

У меня есть базовая таблица с двумя столбцами: name и value. Я хотел бы затенить каждую строку в таблице соответствующим процентом ширины на основе размера значения (по существу, создать боковую гистограмму!). Я могу написать код, чтобы вычислить соответствующий процент для установки, но я не могу понять CSS, чтобы на самом деле затенить каждую строку соответствующим образом. Кажется, что вся строка может быть затенена, но не процент. Это правда?

FWIW, я использую 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>

любые советы о том, как это сделать? Надеюсь, этот вопрос имеет смысл.

10
css html jquery table

2 ответов

вы можете использовать линейные градиенты.

если процент составляет 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+"%)" ;
}

проблема в том, что установка фона на tr хорошо работает в Firefox и Opera, но в Chrome градиент применяется к каждая ячейка.

эту проблему можно исправить, добавив этот код (см.https://stackoverflow.com/a/10515894):

#table td {display: inline-block;}

демо

23

нет необходимости использовать градиенты. Во-первых, создайте простой файл изображения с цветом, который вы хотите затенить строку. В моем случае, я создал .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;
}

результат:

Result

вот простой фрагмент о том, как автоматизировать это для вашего примера:

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 цвет (без градиента на основе).

надеюсь, это помогло!

10