자동 초과 테이블 크기를 피하는 방법은 무엇입니까?

Question

예 : 내 테이블 높이와 너비는 10:10입니다. 내가 테이블 안의 일부 단락을 입력하면 예기치 않게 너비 (50)가 증가합니다. 그 일을 피하기위한 해결책을주세요.

Answer 1

필자의 경우, 테이블 안의 텍스트가 어떻게 렌더링되는지 알고 있다면 필자는 그 텍스트를. CSS와 함께 텍스트를 완벽하게 제어 할 수 있습니다.

<table style="background-color:#ccc;"> 
    <tr> 
     <td><div style="width:20px;height:20px;">'randomtext</div></td> 
    </tr> 
</table> 

위의 스 니펫은 div 태그에 넣은 정적 상자를 제공합니다. 크기에 맞지 않는 문자를 숨기려면 overflow:hidden을 추가하십시오.

<div style="width:20px;height:20px;overflow:hidden;">'randomtext</div> 

당신은 또한 같은 효과를 달성하기 위해 <table style=''> 태그에 table-layout:fixed; CSS 속성을 사용할 수 있습니다. overflow:hidden은 DIV에서와 같이 table-layt와 동일한 효과를 제공합니다. 디자인 목적으로 테이블 사용을 피하는 것을 지적하겠다. (DIV가 이것을위한 요소이다.) 그러나 내가 질문을 올바르게 이해하지 못한다면 나는 또한 용서할 것입니다. 귀하의 질문은이 시점에서 훨씬 더 분명 할 수 있습니다.

측면 참고
우리는 10 × 10 개 픽셀의 제곱 높이 예를 말하면. ' 등을 입력하면 표가 커집니다. 아마 높이에 있지만 글꼴 스타일에 따라 너비가 다를 수도 있습니다. <div>은 이것을 무시할 수 있습니다. 문자가 시세표와 같이 눈에 띄게 작더라도 선택한 크기, 글꼴 및 인코딩의 전체 크기를 중심으로 상자 용으로 예약 된 공간이 있습니다.