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

这是我的表..我应该添加什么让选定的行突出显示？因此，更清楚地看到我的鼠标在哪里....................................... .....................如何突出显示表格中的选定行？

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

来源

2016-01-15 Student.

使用: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>

来源

2016-01-15 14:12:50 HJerem

我也想用'thead'包列标题，并用'tbody'包装数据行。然后将上面的CSS修改为'table.imagetable tbody tr：hover'。 –

它不起作用.... –

@ThomasXie小心它是''table.imagetable tr：hover'' ** NOT **''table.imagetable tr.hover'' – HJerem

在点击链接，你可以使用: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>

来源

2016-01-15 14:14:31

你想添加一个悬停效果，即如果你的鼠标在表行，它会突出呢？

您可以添加以下CSS：

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

来源

2016-01-15 14:16:56

这是因为你宣布一个颜色上的数据排在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>

来源

2016-01-15 14:43:17

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

回答

相关问题