如何在 table 中突出显示所选行？

Question

这是我的table..我应该添加什么来让选定的行突出显示？这样可以更清楚地看到我的鼠标在哪里...................................... .....................

<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>

Answer 1

在您的 css 文件中使用 :hover 属性（根据需要更改颜色）：

table.imagetable tr:hover {
    background-color: #EBECCD;
}

table.imagetable tr {
    background-color: #dcddc0;
}

table.imagetable td {
    background:#dcddc0 url('/static/cell-grey.jpg'); // remove this line
    padding: 3px;
}

table.imagetable {
    width: 100%;
}

像这样清除您的模板：

<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>

Answer 2

单击按钮后，您可以在 css 文件中使用 :active。

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

      table.imagetable td:active {
          background:red;
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #999999;
      }

    <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>

Answer 3

是否要添加悬停效果，即如果您的鼠标悬停在 table 行上，它会突出显示它？

您可以添加以下内容CSS：

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

Answer 4

这是因为您已将颜色声明为在数据行 td 上拖放背景图像的一部分。试试这个：

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:  url('/static/cell-grey.jpg');
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #999999;
}

table.imagetable tr {
  background-color: #dcddc0;
}

table.imagetable tr:hover {
  background-color: #EBECCD;
}

<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 中突出显示所选行？

How to highlight the selected row in a table?

html

css

hover