这是我的表..我应该添加什么才能让所选行突出显示? 所以我可以更清楚地看到我的鼠标在哪里.................................... ........................
<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>
答案 0 :(得分:4)
使用 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>
答案 1 :(得分:1)
点击按钮,您可以在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>
答案 2 :(得分:1)
是否要添加悬停效果,即如果您的鼠标位于表格行上方,它会突出显示它?
您可以添加以下CSS:
table.imagetable tr:hover > td {
background: #fff;
}
答案 3 :(得分:1)
这是因为您已将颜色声明为放入数据行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>