テーブルセルの空きスペースを広げる

Question

htmlリンクを使用してHTML表の行をクリック可能にしたい。あなたはクリック可能な領域は、セルを埋めるように拡張されていない空のテーブルの行に絵に見ることができるよう はここhttp://s31.postimg.org/mdsm5ad7f/Untitled.png

tr.clickable td a { 
    display: block; 
    padding-left: 5px; 
    padding-right: 10px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    background: green; 
} 

参照してください。どうすればこの問題を解決できますか？私はテーブルのセルの緑の領域を拡大したいと思います。

Answer 1

使用このコード：

CSS

.td_text { 
    background: #CCC; 
} 
.td_link { 
    width:150px; 
    position:relative; 
} 
.td_link a { 
    background: green; 
    display:block; 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0;top:0; 
} 

HTML

<table> 
    <tr> 
    <td class="td_link"><a href="#"></a></td> 
    <td class="td_text">text<br>text<br>text<br></td> 
    </tr> 
</table> 

Answer 2

は、CSSの下にこれを追加し、あなたが問題を解決するのに役立ちます。

.td_link a { 
    background: green; 
    display:block; 
    width:100%; 
    height:100%; 
}