フォーカス可能なTDのHTMLマークアップは何ですか？

Question

私はHtml + JS + CSSで実践し、ベストプラクティスにしたいと考えています。 私は1ページのクライアント専用のSudokuページを使用します。 私のSudokuマークアップは基本的に<table>です。<td>です。
（改善のための提案があります）

私の要件：

1. は、矢印キー（プラスホームなど）を備えたセルを介してフォーカス（フォーカスのキーボードの概念）（黄色の背景にCSSでhighlighed）
2. 移動下セルを持っています。
3. 型の整数値現在フォーカスセルにその値を設定

Iが各セル内の入力ボタンを使用します。 Javascriptが正常に動作します。

私の唯一の問題はディスプレイの問題です。 セルにフォーカスがあると、入力ボタンに含まれるビジュアルスペースではなく、TD全体が表示されます。ボタンの周りに「黄色」ではないスペースがあります。

私はCSSの選択で、入力の親を選択することができないと思いますか？以下のような：

input:focus '?? how to go up ??' td { background-color:yellow; 

（空、真ん中の文字時にセットを変更するとき5つのスペースを）私はいつも、各ボタン表示で5つの文字を持っているような、いくつかのトリックを試してみましたが、何も視覚的に満足ではありません。 さらに、視覚化のためにコンテンツを変更することは、ベストプラクティスに対しては明らかです。それは、Html/Css/JsのMVCの違いです！

私はすでにこのサイトで回答を検索していますが、私は近いが別個の質問と回答を見つけました。 （擬似）クラスに依存して親ノードと一致したCSSセレクタを構築することはできません