오버플로 : 테이블을 사용할 때 숨김이 작동하지 않습니다.

테이블의 길이가 긴 긴 문자열에 문제가있어 overflow:hidden은 내가 수행하는 것으로 보이지 않습니다. 로드 할 때오버플로 : 테이블을 사용할 때 숨김이 작동하지 않습니다.

<html> 
    <head> 
     <style type="text/css"> 
      td.scroll 
      { 
       background-color:#00FFFF; 
       width:100px; 
       height:100px; 
       overflow:scroll; 
      } 
      td.hidden 
      { 
       background-color:#00FF00; 
       width:100px; 
       height:100px; 
       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table width="100%"> 
      <tr> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

이 텍스트에 관계없이 테이블 폭의 문자열을 모두 표시하는 스트레칭 것 : 여기이 효과를 테스트하기 위해 사용하고있는 샘플 코드입니다. 내가 한 것은 셀 측정을 지나갈 문자열의 일부를 표시하지 않는 것입니다. 테이블에서도 가능합니까? 그렇다면 무엇이 잘못 되었나요?

출처

2009-10-29 canadiancreed

오버 플로우는 블록 수준 요소에서만 작동합니다. 표 요소는 블록 요소가 아닙니다. 이러한 효과를 얻으려면 <div>을 표 셀 안에 넣고 <div>에 효과를 적용하십시오. 와

td.scroll div { 
    background-color: #00FFFF; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
} 

td.hidden div { 
    background-color: #00FF00; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
}

<table width="100%"> 
<tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 
</table>

출처

2009-10-29 14:45:51 cletus

그랬습니다. 이것에 대해 많이 고마워 내 머리카락을 남겨두고있어! 추측 내 CSS에 좀 더 읽을 필요가있다. – canadiancreed

CSS에 상당히 비범 한 측면입니다. 누군가가 알아내는 유일한 시간은 그들이 정확한 문제를 겪고있을 때입니다. 저를 믿으십시오. – cletus

CSS 2.1에서는 표 셀에서 '오버플로'가 작동한다고 말합니다. 그러나 실제로 WebKit만이 셀 스크롤 기능을 지원합니다. '숨겨진'은 괜찮습니다. – bobince

-1

확실하지 않음은이 테이블 셀에 대한 작동 안하지만, 이상적으로 당신이 정말로 어쨌든 숨길하지 않으려면.

http://code.google.com/p/hyphenator/

예 :

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

출처

2009-10-29 14:46:05

뭔가 비슷한 것을 생각하고 있었지만, 불행하게도 그 결정은 내게 달린 것이 아닙니다. – canadiancreed

<html> 
<head> 
<style> 
td { width: 33%; height: 2em; } 
td div { width:100%;height:100%;overflow:hidden } 
</style> 

</head> 

<body> 

<table border="1" style="width:300px;"> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
</table> 

</body> 

</html>

출처

2009-10-29 14:55:34 bugtussle

난 당신이 다음 LIB (단 JS의 몇 줄을 구현하기 위해 수행)을 쉽게 할 수있는 긴 단어를 하이픈 제안 기본적으로 자동 테이블 레이아웃 메커니즘은 테이블 너비를 최소 셀 내용 너비에 맞게 확장합니다.

<table width="100%" style="table-layout: fixed">

및 예상대로 예를 작동 다음 table-layout 속성 그렇게하지를 알려주십시오. 테이블 셀에서 width: 100px을 제거해야합니다. 100 % 대역폭 테이블과 함께 사용하면 의미가 없습니다. (고정 테이블 레이아웃으로 문제가되지 않지만, 세포 또는 <col> S의 첫 번째 행으로 열 너비의 모든 베어링을 갖는다.) overflow: scroll 또는 auto 가장 브라우저 테이블 셀에 대해 작동하지 않는다

참고. (WebKit에서합니다.)

출처

2009-10-29 15:07:51 bobince

"표 레이아웃 : 고정"으로 변경되지 않습니다. 높이가 여전히 확장됩니다. 웹킷 인 크롬에서 테스트되었습니다. – matteo

오버플로 : 테이블을 사용할 때 숨김이 작동하지 않습니다.

답변

관련 문제