Margins not clickable: Box Model confusion
I am trying to make an entire table cell clickable. The general advice I have found is to use display: block; but all of the examples I have seen have only a single line cells. I have cells with rowspans that seem to make life harder.
Consider this brightly coloured example:
<html>
<head>
<style type="text/css">
td { border: 1px; background-color: blue; }
td a { display: block; background-color: yellow; border: 1px solid red; }
</style>
</开发者_开发百科head>
<body>
<table>
<tr>
<td rowspan=2><a href="#">Left</a></td>
<td><a href="#">Upper Right</a></td>
</tr>
<tr>
<td><a href="#">Lower Right</a></td>
</tr>
</table>
</body>
</html>
The anchor tag's block (yellow) is all clickable. But the left hand side has (blue) margins above and below it that are not clickable. I guess I need something to increase the padding to fill the full td cell on the left (without changing the size of the cells on the right), but I haven't been able to find the right incantation to do this.
td a {
display: inline-block;
height: 100%;
width: 100%;
background-color: yellow;
border: 1px solid red;
}
Demo
Another option would be to use a javascript package like jquery or YUI and add a click listener to the <td> rather than just the <a>
加载中,请稍侯......
精彩评论