TD 내부의 div가 나쁜 생각입니까?

StackOverflow https://stackoverflow.com/questions/1110915

문제

내가 들었던 것 같아요 <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">

아니요. 반드시 아닙니다.

TD 내에 DIV를 배치 해야하는 경우 TD를 올바르게 사용하고 있는지 확인하십시오. 표 다수와 의미론에 관심이 없다면 궁극적으로 TDS의 DIV에 신경 쓰지 않을 것입니다. 그래도 문제가 있다고 생각하지 않습니다. 가지다 그렇게하려면 괜찮습니다.

HTML 사양에 따르면

ㅏ <div> 위치에 배치 할 수 있습니다 흐름 내용 예상됩니다1, 그것이 <td> 컨텐츠 모델2.

테이블 셀에는 합법적으로 블록 레벨 요소를 포함 할 수 있으므로 본질적으로 가짜 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의 너비, 높이, 배경 등을 제어 할 것입니다.

그것을 다루는 두 가지 방법

  1. 놓다 div 내부에 tbody 꼬리표
  2. 놓다 div 내부에 tr 꼬리표

Feference가 표시되면 두 가지 접근 방식이 모두 유효합니다. https://stackoverflow.com/a/23440419/2305243

그것은 깨집니다 의미론, 그게 다야. 잘 작동하지만 "Semantics를 끊는"경우 HTML을 처리하는 것을 즐기지 않는 스크린 리더 나 도로 아래에있는 것이있을 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top