Html 如何突出显示表中选定的行？

这是我的桌子。。我应该添加什么以突出显示所选行？ 所以更清楚地看到我的鼠标在

<style type ="text/css">
      table.imagetable {
          font-family: verdana,arial,sans-serif;
          font-size:15px;
          color:#333333;
          border-width: 1px;
          border-color: #999999;
          border-collapse: collapse;
          width:100%;
      }
      table.imagetable th {
          background:#b5cfd2 url('/static/cell-blue.jpg');
          border-width: 1px;
          padding: 12px;
          border-style: solid;
          border-color: #999999;
      }
      table.imagetable td {
          background:#dcddc0 url('/static/cell-grey.jpg');
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #999999;
      }
    </style>

    <table class="imagetable">
      <tr>
        <th>Time</th><th>Category</th><th>Filename</th>
      </tr>
        {% for (t,f,c,l, t2) in data %}
          <tr>
              <td style = "padding:3px;">{{date}} {{t2}}</td>
              <td sytle = "padding:3px;"><a href = "/report_category/{{c}}/">{{c}}</a></td>
              <!-- l is the relative location, we need absolute directory here.-->
              <td style = "padding:3px;"><a href = "/{{l}}">{{f}}</a></td>
           </tr>
        {% endfor %}
    </table>

table.imagetable{
字体系列：verdana、arial、无衬线字体；
字体大小：15px；
颜色：#333333；
边框宽度：1px；
边框颜色：#999999；
边界塌陷：塌陷；
宽度：100%；
}
表4.1.1.1.1表th{
背景：#b5cfd2url（'/static/cell blue.jpg'）；
边框宽度：1px；
填充：12px；
边框样式：实心；
边框颜色：#999999；
}
table.imagetable td{
背景：#dcddc0url（'/static/cell grey.jpg'）；
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#999999；
}
TimeCategoryFilename
{数据%中（t，f，c，l，t2）的%
{{date}{{t2}
{%endfor%}

在css文件中使用

：hover

属性（根据需要更改颜色）：

按如下方式清除模板：

<table class="imagetable">
  <thead>
    <tr>
      <th>Time</th><th>Category</th><th>Filename</th>
    </tr>
  </thead> 
  <tbody>
  {% for (t,f,c,l, t2) in data %}
    <tr>
      <td>{{date}} {{t2}}</td>
      <td><a href = "/report_category/{{c}}/">{{c}}</a></td>
      <td><a href = "/{{l}}">{{f}}</a></td>
     </tr>
  {% endfor %}
  </tbody>
</table>

TimeCategoryFilename
{数据%中（t，f，c，l，t2）的%
{{date}{{t2}
{%endfor%}

单击按钮，您可以在css文件中使用

：active

table.imagetable{
字体系列：verdana、arial、无衬线字体；
字体大小：15px；
颜色：#333333；
边框宽度：1px；
边框颜色：#999999；
边界塌陷：塌陷；
宽度：100%；
}
表4.1.1.1.1表th{
背景：#b5cfd2url（'/static/cell blue.jpg'）；
边框宽度：1px；
填充：12px；
边框样式：实心；
边框颜色：#999999；
}
table.imagetable td{
背景：#dcddc0url（'/static/cell grey.jpg'）；
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#999999；
}
table.imagetable td:活动{
背景：红色；
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#999999；
}

TimeCategoryFilename
{数据%中（t，f，c，l，t2）的%
{{date}{{t2}
{%endfor%}

是否要添加悬停效果，即如果鼠标位于表格行上方，它将突出显示该行

您可以添加以下CSS：

table.imagetable tr:hover > td {
    background: #fff;
}

---

这是因为您在数据行

td

的背景图像中声明了一种颜色。试试这个：

table.imagetable{
字体系列：verdana、arial、无衬线字体；
字体大小：15px；
颜色：#333333；
边框宽度：1px；
边框颜色：#999999；
边界塌陷：塌陷；
宽度：100%；
}
表4.1.1.1.1表th{
背景：#b5cfd2url（'/static/cell blue.jpg'）；
边框宽度：1px；
填充：12px；
边框样式：实心；
边框颜色：#999999；
}
table.imagetable td{
背景：url（'/static/cell grey.jpg'）；
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#999999；
}
table.imagetable tr{
背景色：#dcddc0；
}
table.imagetable tr：悬停{
背景色：#EBECCD；
}

时间
类别
文件名
{数据%中（t，f，c，l，t2）的%
{{date}{{t2}
{%endfor%}

我还将使用

thead

包装列标题，并使用

tbody

包装数据行。然后将上面的CSS修改为

table.imagetable tbody tr:hover

@ThomasXie小心它是

table.imagetable tr:hover

而不是

table.imagetable tr.hover

@HJerem我做了与你发布的完全相同的事情。。。我把它调成红色。。但它仍然没有突出显示…@ThomasXie删除这行

background:#dcddc0url（'/static/cell grey.jpg'）

或将

table.imagetable tr:hover{

更改为

table.imagetable td:hover{

，但更喜欢第一种解决方案，因为您希望突出显示整行，而不仅仅是单元格。@HJerem我也在尝试使此表全页宽。。您知道如何实现吗？

table.imagetable tr:hover > td {
    background: #fff;
}