td タグ内のリンク反応 / hover 範囲を隣 td にまで広げたい。

Question

実現したいこと

1. 隣 td タグ内でもリンクが反応する
2. 隣 td タグ内での Hover でリンク文字色が変わる (白になる)

発生している問題

 1. 左 td 内ではリンクが反応しない
 2. 左 td 内での Hover ではリンク文字色が変わらない

該当のソースコード

        <div id="button">
            <table>
                <tr>
                    <td valign="top" width="50%" class="box">
                        <table border="0" width="100%">
                            <tr>
                                <td class="sLabel" width="20px"></td>
                                <td class="sBody" width=""><a href="#">リンク</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>

            #button { background:#eeeded; }
            #button .box { background:#fff; font-size:16px; width:100%; height:70px; line-height:70px; }
            #button .box a { display:block; }
            #button .box a:hover { background:#cc141c; color:#fff; }
            #button .box:hover { background:#cc141c; color:#fff; }
            #button div { display:inline-block; width:0%; min-width:420px; }

試したこと

リンクのブロック指定。
display:block;

補足情報（FW/ツールのバージョンなど）

SharePoint Online Web パーツ内のタグ構造を使用しているため、
id や class が指定されていない場合はタグ構造から指定する必要があります。
こちらの html ソースはその一部になります。

css 単独では対応できない場合、javaScript で html タグを例えば以下のように書き換えれば、

        <div id="button">
            <table>
                <tr>
                    <td valign="top" width="50%" class="box">
                        <table border="0" width="100%">
                            <tr>
                                <td class="sLabel" width="" ></td>
                                <td class="sBody" width="" style="margin-left:20px;"><a href="#">リンク</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>

左に空白を残しながら、全域にリンクが動作するようになるのでしょうか?

Answer 1

実現したいことは、これと同じ結果でしょうか？

<style>
    a.a_box{
        background:#fff; font-size:16px; width:100%; height:70px; line-height:70px;
        display: block;
    }
    a.a_box:hover{
        background:#cc141c; color:#fff;
    }
    td.td_box{
        min-width:420px;
        text-align: center;
    }
</style>
<table>
    <tr>
        <td class="td_box">
            <a href="#" class="a_box">リンク</a>
        </td>
    </tr>
</table>

Comments

[BetterEveryday]

One_of_Arthur さん、
ご検討 / 回答いただきまして、どうもありがとうございます。

SharePoint は html 構造を自動生成/編集してしまうため、いつも対応に苦慮していますが、
今回は疑似要素の配置で解決できました。

私の悩み解決のために貴重なお時間とお気持ちを
いただきましてどうもありがとうございました。

Answer 2

aリンクの疑似要素を position:absolute で #button .box の範囲まで拡張すればどうでしょう。
下記のCSSを追加してみてください。

#button .box {
  position: relative;
}
#button .box a::after{
  position:absolute;
  content:"";
  top:0;right:0;
  bottom:0;left:0;
  z-index:1;
}

Codpen Sample

Comments

[BetterEveryday]

hatena19 さん、
いつも優しく導いていただきまして、どうもありがとうございます。

擬似要素を使って位置移動させる、というのは私にはまったく思いつけないことでした。
熟練 CSS 開発者 hatena19 さんならではの応用テクニックですね。

今回、教えていただきました、position プロパティと、重なり順序を指定する z-index プロパティを使いこなしていければ、自由に Web 表現できるようになりたい、という、私の夢に近づいていけるように思います。
(長い間悩んでいた、長大な一覧表のヘッダ固定にも使えそうですので、意気揚々としています)

周りに相談できる開発者がいない環境の中で、自分ではどうしようもなく、
半ば諦めていた中での、ダメ元での投稿でしたので、たいへん助かりました。

今回も私の悩み解決のために貴重なお時間とお気持ちを、
助けていただきましてどうもありがとうございました。

Answer 3

tableの中にtableを置くことはさけてください
cssで処理するには無理があります。
あえてやるならtr:hover的な処理ですがそれも命題の処理としては不十分だと思います
どうしてもというならjsで実装してください

Comments

[BetterEveryday]

yambejp さん、
ご検討 / 回答いただきまして、どうもありがとうございます。

SharePoint は html 構造を自動生成/編集してしまうため、いつも対応に苦慮していますが、
今回は疑似要素の配置で解決できました。

私の悩み解決のために貴重なお時間とお気持ちを
いただきましてどうもありがとうございました。