Как выделить выделенную строку в таблице?

Question

Вот мой стол. Что я должен добавить, чтобы выделить выделенную строку? Так что яснее видеть, где моя мышь в ....................................... .....................

<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

Используйте :hover свойство в вашем файл CSS (изменение цвета, как вам нравится):

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

На кнопку мыши вы можете использовать :active внутри файла 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; 
 
     } 
 

 
     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

Вы хотите добавить эффект парения то есть, если мышь находится над строкой таблицы, это будет выделить его?

Вы можете добавить следующие 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>