Цвет фона ячейки таблицы набора CSS Используя текст в ячейке таблицы

От Драконы в Алгоритме , интерпретация в C#:

int k = 10; // items to select
var items = new List(new[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 });
var selected = new List();
double needed = k;
double available = items.Count;
var rand = new Random();
while (selected.Count < k) {
   if( rand.NextDouble() < needed / available ) {
      selected.Add(items[(int)available-1])
      needed--;
   }
   available--;
}

Этот алгоритм выберет уникальный indicies списка объектов.

6
задан Community 23 May 2017 в 11:48
поделиться

3 ответа

Как сказал Дэвид Дорвард, нет способа сделать именно то, что вы хотите, с помощью CSS, однако я могу придумать несколько обходных путей ...

Предполагая, что ваш html выглядит примерно так (т.е. элемент с цветом фона - единственное, что находится в ячейке таблицы):

<table>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td><span class="bg" >test</span></td>
    </tr>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td>test with longish string<br/> over two lines<td>
    </tr>
</table>

Вы можете сделать это со своим CSS:

td { height: 100%;}
.bg { background-color: #f00; width: 100%; height: 100%; display: block; }

Он работает в этом простом примере (по крайней мере, в firefox 3.5) , но могут иметь другие побочные эффекты в зависимости от того, как выглядит содержимое вашего html.


Изменить : Другой вариант, если вы не против взломать его через javascript, - использовать jQuery следующим образом:

$(function() { $("td:has(span.bg)").addClass("bg"); });

Это работает с приведенным выше примером html / css, но, очевидно, его необходимо изменить, чтобы соответствовать вашим классам css и т. д.

8
ответ дан 16 December 2019 в 21:44
поделиться

Нет.

CSS, по крайней мере в настоящее время, не имеет способа стилизовать элемент на основе всего, что появляется после начального тега для этого элемента в документе. Таким образом, вы не можете стилизовать элемент на основе его содержимого.

0
ответ дан 16 December 2019 в 21:44
поделиться

Что ж, если вы хотите покрыть только всю ячейку, это не требует css, если вы не хотите его использовать:

<table width="100" height="100" border="2">
<tbody>
<tr>
<td bgcolor='red'>This is Red</td>
</tr>
<tr>
<td bgcolor='blue'>This is Blue</td>
</tr>
</tbody>
</table>

Он работает в FireFox, IE8 и 7. Он охватывает всю ячейка, даже если в тексте нет.

0
ответ дан 16 December 2019 в 21:44
поделиться