초점을 맞춘 TD에 대한 HTML 마크 업은 무엇입니까?

Question

저는 Html + JS + CSS를 사용하여 실전에 옮기고 최상의 연습을하고 싶습니다. 한 페이지의 클라이언트 전용 스도쿠 페이지를 사용합니다. 내 스도쿠 마크 업은 기본적으로 <table>이며 <td>입니다.
(개선을위한 제안이 있습니다.)

내 요구 사항 :

1. 는 (노란색 배경에 CSS로 강조되어있는 부분) 초점 아래 세포 (초점 키보드의 개념)가
2. 이동 화살표 키 (플러스 홈 등)와 세포를 통해 .
3. 유형 - 정수 값 I는 각각의 셀 내부의 입력 버튼을 사용하여 현재 포커스 셀

에 해당 값을 설정한다. 자바 스크립트가 정상적으로 작동합니다.

유일한 문제는 디스플레이 때문입니다. 셀에 포커스가있을 때 입력 버튼에 포함 된 시각적 공간이 아니라 TD 전체가 표시됩니다. 나는 '노란색'이 아닌 버튼 주위에 약간의 공간이 있습니다.

입력란의 부모를 선택하려면 CSS 선택 부분에 올라갈 수 있다고 생각하지 않습니까? 예를 들면 :

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

(빈, 중간 문자 때 설정을 변경할 때 5 개 공간) 난 항상 각각의 버튼 표시 5 개 문자를 가진 같은 몇 가지 트릭을 시도했지만 아무것도 시각적으로 만족하지 않습니다. 시각화를 위해 내용을 변경하는 것이 모범 사례에 반대되는 것은 분명합니다. 이것이 Html/Css/Js의 MVC 차이점입니다!

이미이 사이트에서 답변을 검색했으나 친숙하지만 별개의 질문과 대답을 발견했습니다. (사이비) 클래스에 따라 부모 노드와 일치하는 CSS 선택기를 구성 할 수 없습니다