css - 異なるアンカー要素を持つdivの背景色全体をクリック可能にする方法

Question

1つのdivに2つのアンカー要素を含むhtmlがあります。背景色を使用して個々の要素にスタイルクラスを適用すると、背景全体がクリック可能になります。スタイルクラスをdivに適用すると、両方のアンカー要素が背景に表示されますが、背景全体はクリックできず、個々のアンカー要素のみがクリック可能です。

JSやjQueryは使いたくありません。

<div id="" class="AccordionTab" name="">
    <table id="Nickname_table" class="CommonTableClass" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr id="Nickname_tr">
                <td id="Nickname_td">
                    <a id="Nickname" href="#BalanceDisplay">It is my nick Names</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table id="AvailableTag_table" class="CommonTableClass" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr id="AvailableTag_tr">
                 <td id="AvailableTag_td">
                     <a id="AvailableTag" href="#BalanceDisplay" ">hi</a>
                 </td>
            </tr>
       </tbody>
   </table>
</div>

ここで、AccordionTabは、背景色を持つスタイルクラスです。

適用すれば<a id="AvailableTag" class="AccordionTab" href="#BalanceDisplay" ">hi</a>

単一のアンカー要素の場合、背景全体をクリック可能になります