小编Maz*_*aze的帖子

我有以下小提琴.

编辑:应用行边框样式:

table,th,td
{
    border:2px solid black;
    border-collapse:collapse;
}
tr:hover td
{
    background-color:grey;
    border-top: 2px solid rgb(10, 0, 255);
    border-bottom: 2px solid rgb(10, 0, 255);
}
td:hover
{
    background-color:rgb(214,214,214) !important;
    border:2px solid red !important;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

我所追求的是突出显示ROW和CELL.最初曾经想过做一些十字准线,但是列背景着色需要JavaScript,我暂时还会避免.

在这种情况下,ROW:hover背景颜色会变暗,边框会强调.

该td:hover则是一个不同的颜色,边框强调不同.

选中Chrome,未检查Firefox.

问题:需要使用!important.细胞边界 - 左边和顶部没有着色为红色？

那么有没有办法编写不使用的CSS important!,并在TD单元格上修正边框样式？

在制作应用程序的html版本的过程中,一个部分是一个最终可能有许多单元格的表.

大约:150列,最多可容纳10,000行.

问题是性能,为什么能够根据内容设置每个单元格的样式？

因此,在每个单元格中都有一个数字,并根据数字所适合的百分比填充背景颜色.

例如:有条带

77-100 = red
33 - 77 = blue
0 < 33 = green
0 = black

我在小桌子上试过的是给每个<td>我想要给它上色的课程.(颜色是用户可更改的,所以设置一个类,应该能够更改类定义)

所以得到这样的东西:

<tr>
  <td class='percentile-100'>87.5%</td>
  <td class='percentile-77'>75.0%</td>
  <td class='percentile-0'>0.0%</td>

在CSS中,为类设置样式.只需要4种款式.

现在有(150*10,000 =)1,500,000个细胞进行样式化,我在考虑可能会产生什么样的影响.

从数据生成的JavaScript表.但在MB区域的数据是啊.然后表呈现客户端.因此,渲染时,决定要设置的类值.

根据内容为每个单元设置样式的其他可能方法是什么？

使用Knockout,我有一个foreach来显示一个比例的颜色列表.

然而现在试图重新调整间距问题,发现它有点像Knockout问题.

基本设置数组中每个项目的背景颜色.由于我非常喜欢缩进源代码,html看起来像这样:

<div class="color-scale" data-bind="foreach: colors">
    <div class="color-scale-item horizontal" data-bind="style: {backgroundColor: $data}"></div>
</div>

的jsfiddle

有一个CSS来设置Inline-block的样式,它不会放入任何空间.

比例看起来不错,但添加了90多种颜色,并不总是需要这个空间.那么如何删除？

空间仅仅是由于每个div的计算html中的返回行和间距.

我尝试过跨越,同样的结果.

那么有没有办法用'精美'书面来源写出淘汰赛,但是如果没有在一行上书写就不会产生不需要的空格？

<div class="color-scale" data-bind="foreach: colors"><div class="color-scale-item horizontal" data-bind="style: {backgroundColor: $data}"></div></div>

JSFiddle单行