TD 내부의 div가 나쁜 생각입니까?
-
12-09-2019 - |
문제
내가 들었던 것 같아요 <div>
내부 <td>
아니오 아니었다. 그것이 작동하지 않는 것이 아니라, 디스플레이 유형을 기반으로 실제로 호환되지 않는 것에 대한 것입니다. 내 직감을 백업 할 증거를 찾을 수 없으므로 완전히 틀릴 수 있습니다.
해결책
사용 a div
INSTIDE a td
레이아웃에 테이블을 사용하는 다른 방법보다 나쁘지 않습니다. (어떤 사람들은 레이아웃을 위해 테이블을 사용하지 않으며, 나는 그중 하나가되었습니다.)
사용하는 경우 a div
안에 td
그러나 요소 크기의 방법을 예측하기 어려운 상황에 처하게됩니다. DIV의 기본값은 부모로부터 폭을 결정하는 것이며 테이블 셀의 기본값은 내용의 크기에 따라 크기를 결정하는 것입니다.
방법에 대한 규칙 div
크기는 표준에 잘 정의되어 있어야하지만 방법에 대한 규칙 td
크기가 잘 정의되어 있지 않아야하므로 다른 브라우저는 약간 다른 알고리즘을 사용합니다.
다른 팁
확인 후 XHTML DTD 나는 그것을 발견했다u003CTD> -요소는 제목, 목록 및 또한 블록 요소를 포함 할 수 있습니다.u003CDIV> -집단. 따라서 au003CDIV> -au003CTD> -요소는 XHTML 표준을 위반하지 않습니다. HTML의 다른 현대 변형은u003CTD> -요소.
관련 DTD 규칙은 다음과 같습니다.
<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
테이블 셀에는 합법적으로 블록 레벨 요소를 포함 할 수 있으므로 본질적으로 가짜 PA가 아닙니다. 물론 브라우저 이탈은 이것을 투기 이론적 위치로 남겨 둡니다. 레이아웃 문제와 버그를 유발할 수 있습니다.
테이블이 레이아웃에 사용되었지만 때로는 여전히 그렇습니다. 대부분의 브라우저가 콘텐츠를 올바르게 렌더링 할 것이라고 생각합니다. 심지어 IE.
위치를 사용하려면 : 절대; div에서 position: relative;
TD에서는 문제가 발생합니다. FF, Safari 및 Chrome (PC가 아닌 Mac)은 TD에 비해 DIV를 배치하지 않습니다 (예상처럼) DIV에도 해당됩니다. display: table-whatever;
따라서 그렇게하고 싶다면 컨테이너 용 두 개가 필요합니다. width: 100%;
height: 100%;
그리고 테두리가 없으므로 시각적 영향없이 TD를 채 웁니다. 그리고 절대적인 것.
그 외에 왜 셀을 쪼개지 않습니까?
나는 a를 배치함으로써 문제에 직면했다 <div>
내부에 <td>
.
나는 DIV 사용을 식별 할 수 없었습니다 document.getElementById()
내가 TD 내부에 배치한다면. 그러나 밖에서는 잘 작동했습니다.
모두가 언급했듯이 레이아웃 목적에 좋은 생각이 아닐 수도 있습니다. 나는 똑같이 궁금해했기 때문에이 질문에 도착했고 그것이 유효한 코드인지 알고 싶었습니다.
유효하므로 다른 목적으로 사용할 수 있습니다. 예를 들어, 내가 사용할 것은 멋진 "CSSED"DIV를 테이블 행 안에 넣은 다음 빠른 jQuery 함수를 사용하여 사용자가 가격, 이름 등으로 정보를 정렬 할 수 있도록하는 것입니다. 레이아웃 테이블 만 제공하면 "수직 순서"이지만 CSS의 DIV의 너비, 높이, 배경 등을 제어 할 것입니다.
그것을 다루는 두 가지 방법
- 놓다
div
내부에tbody
꼬리표 - 놓다
div
내부에tr
꼬리표
Feference가 표시되면 두 가지 접근 방식이 모두 유효합니다. https://stackoverflow.com/a/23440419/2305243
그것은 깨집니다 의미론, 그게 다야. 잘 작동하지만 "Semantics를 끊는"경우 HTML을 처리하는 것을 즐기지 않는 스크린 리더 나 도로 아래에있는 것이있을 수 있습니다.