CODEWITHSUNDEEP
htmlcsshover
Student.
Student.

Reputation: 88

How to highlight the selected row in a table?

Here is my table.. what should i add to let the selected row is highlighted? So it's more clear to see where my mouse at............................................................

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

Upvotes: 3

Views: 18348

Answers (4)

J&#233;r&#233;my Halin
J&#233;r&#233;my Halin

Reputation: 563

Use the :hover property in your css file (change color as you like):

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

Clear your template like so:

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

Upvotes: 5

Karl Dawson
Karl Dawson

Reputation: 977

It's because you had declared a color as part of dropping in a background image on the data row td. Try this:

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>

Upvotes: 1

Yug Kapoor
Yug Kapoor

Reputation: 785

Do you want to add a hover effect i.e. if your mouse is over a table row, it will highlight it?

You can add the following CSS:

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

Upvotes: 2

YaBCK
YaBCK

Reputation: 3029

On button click you can use :active inside the css file.

      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>

Upvotes: 1

Related Questions