상자 - 인라인 용 블록 모델과 테이블 내 블록 요소 td

테이블 형식의 데이터를 표시하는 데 테이블을 사용하고 있지만 내용이 더 많은 수직 공간을 차지하지 않도록 픽셀 단위로 크기를 조정해야합니다. 내가 사용할 수있는 것보다. 또한, 수십 개의 요소가 있기 때문에 CSS 만 사용하는 레이아웃은 적합하지 않습니다. 상자 - 인라인 용 블록 모델과 테이블 내 블록 요소 td

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<style> 
table, td, tr, thead, tfoot, tbody, th, tf { 
    border-collapse: collapse; 
    margin: 0px; 
    padding: 0px; 
    border:0; 
    line-height:16px; 
} 
</style> 
</head> 
<body> 
    <table border="0" cellspacing="0" cellpadding="0"> 
     <tr style="height:16px"> 
     <td> 
      <span style="font-size:10pt;">Here is some text</span> 
     </td> 
     </tr> 
    </table> 
</body> 
</html>

은 기본적으로 내가이 구성에서이 17px을 복용 끝, 그러나, 테이블의 행은 16px을 차지하려는 :

여기 내 간단한 테스트 코드입니다. 이 등 15 픽셀 만 (17)의 TD와 TR 아직 패딩, 아니 테두리의 범위를 보여줍니다 방화범 요소를 검사

... IE에서

firebug table inline

나는 같은 동작을 얻을

마지막으로 ie table inline offset

, 내 스팬 ELEM를 설정하여 문제를 해결할 수 있습니다, 그러나 거기에 내 신비 추가 픽셀 또는 두 가지에 대해 좀 더 정보가있는 스팬 요소 오프셋 보인다 (또는 span 요소를 display : block으로 만들거나 심지어는 display : table-cell으로 만들어서 div에 넣을 수도 있습니다). 그래서 내 문제를 해결하는 데 정말로 도움이 필요하지 않지만, 이유는 인라인 요소가 테이블 셀에 들어가면 결국 더 많은 공간을 차지하게됩니다. 난 구글과 w3c 사양을 시도했지만 유용한 아무것도 찾을 수 없습니다.

출처

2011-01-22 Matt Palmerlee

~~스팬의 라인 높이와 같을 수 있습니까?~~

편집 : 나는이 질문에 정말로 대답하지 않았다는 것을 깨달았습니다. 나는 파이어 버그 (Firebug)에서 주변을 파고 들었다. (필자는 맥을 사용 중이기 때문에 현재 IE에 접근 할 수 없다.) 셀의 높이를 밀고있는 스팬 자체가 아닌 것처럼 보인다. 결국 td의 높이를 제어하게된다. 범위의 높이는 14px뿐입니다. 나는 이것이 빈 텍스트 노드 (IE의 개발 도구에있는 쇼)가 높이를 밀고 있다고 의심한다. 이를 확인하는 한 가지 방법은 글꼴 크기 지정을 노드 하나 또는 두 개 위로 이동하여 빈 텍스트 노드에도 적용되도록하는 것입니다. FB에서 적어도 그것을 고쳐주고 스팬이 문제가 아니라는 것을 증명하는 것 같습니다. (div를 대신 사용하면 빈 텍스트 노드가 존재하지 않을 수 있습니까? span 또는 div가 필요합니까, 아니면 텍스트를 바로 사용할 수 있습니까?)

출처

2011-01-22 06:03:46 Nogwater

재미있는, IE 개발자를 보면 그 빈 텍스트 노드에서 툴은 공간을 차지하지 않는다는 것을 보여 주며, div로 스팬을 변경하면 비좁은 작은 빈 텍스트 노드가 표시되지 않습니다. span이나 div를 전혀 사용하지 않고 텍스트를 td에 직접 입력하면 작동합니다. 글꼴 크기를 더 높은 수준으로 가져 오면 셀 크기가 17 대신 16 픽셀로 올바르게 조정되는 것처럼 보이지만 왜 그렇게 될지 이해하지 못합니다. 빈 셀 노드를 만드는 것처럼이 동작을 일으키는 테이블 셀 안에 인라인 요소가있는 것이 있는지 궁금합니다. –

스팬을 자체 행에 두지 않으면 빈 텍스트 노드가 사라 집니까? ... – Nogwater

td와 span 태그 사이의 공백/개행을 제거하면 별 의미가 없습니다. 테이블 셀에 줄 바꿈을하는 것이 좋지 않나요? 마크 업을 조금 더 읽기 쉽게 만들고 싶었습니다. 그래서 그것이 제가 그렇게했습니다. 여전히 셀에 줄 바꿈을위한 공간이 더 필요하고 줄 바꿈이없는 div가 아닌 이유는 여전히 불투명합니다. 블럭 레벨 요소를 사용하면 전체 셀을 차지할 때 테이블 셀이 사용되는 것으로 추측합니다. –

상자 - 인라인 용 블록 모델과 테이블 내 블록 요소 td

답변

관련 문제