我对一些设计有一个小问题。问题是表格顶部或底部的一行的背景颜色似乎“悬在”边缘。我认为背景颜色仍在应用表格样式,但我一生都无法弄清楚(我不是设计师!)。Jfiddle在这里:
HTML:
<div class="stats_table">
<table cellspacing="0">
<tr class="tablehead">
<th>ID</th>
<th>Name</th>
<th>Contact Person</th>
<th>Contact Number</th>
<th>Email Address</th>
<th>Status</th>
<th>Location</th>
<th class="modify">Options</th>
</tr>
<tr class="second_row">
<td>1</td>
<td>Test Agency cc.</td><td>John Doe</td>
<td>0112131232</td>
<td><a target="_blank" href="mailto:jd@testagency.co.za">jd@testagency.co.za</a> </td>
<td>Active</td>
<td>Hatfield</td>
<td class="modify">
<a onclick="return false;" href="#"><img title="View Agency Details" src="img/icons/list_small.png"></a>
<a onclick="return false;" href="#"><img title="Disable Agency" src="img/icons/delete_small.png"></a>
</td>
</tr>
</table>
</div>
CSS:
table {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E2E2E2;
border-collapse: separate;
border-radius: 20px 20px 20px 20px;
moz-border-radius: 20px 20px 20px 20px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
line-height: 1;
font-size: 12px;
width: 100%;
}
th {
padding: 5px 10px 5px 10px;
}
td {
padding: 5px 10px 5px 10px;
text-align: left;
}
.tablehead {
background-color: #E9E9EA;
color: #747070;
text-align: left;
}
.second_row {
background-color: #DFEFFC;
}
谢谢你的帮助!