넓은 테이블 셀을 잘라내는 (숨기기) 방법이 있습니까?

Question

전 브라우저 너비에 걸쳐있는 테이블을 실현하려고합니다.

이 표에는 3 개의 표 셀이 있습니다. 첫 번째 셀과 마지막 셀은 "고정"입니다. 즉, 항상 브라우저 창 왼쪽 경계의 첫 번째 셀, 브라우저 창의 오른쪽 경계에있는 마지막 셀에 표시되어야합니다.

두 번째 셀 (가운데)에는 셀이 많고 길이/너비가 다른 테이블이 하나 더 있습니다. 이 테이블을 "content-table"이라고 부르 자요.

이렇게 보일 수 있습니다.

[첫 번째 셀] | [콘텐츠 1 | 콘텐츠 2 | 콘텐츠 3 | 콘텐츠 4] | [마지막 셀]

문제는 "콘텐츠 테이블"에 많은 콘텐츠가 포함될 수 있다는 것입니다. "첫 번째 셀"과 "마지막 셀"은 항상 표시되어야하므로 크기가 큰 "경쟁 테이블"은 부분적으로 숨겨져 있어야합니다.

마지막으로 "overflow : hidden"과 같은 것이 필요하지만 이는 테이블 셀에서 작동하지 않습니다. (작동하지 않는 것처럼 보일?)

내가 문제를 표시하는 작은 jsfiddl 있습니다 http://jsfiddle.net/thirtydot/YRgwB/3/

내가 어제부터이 문제에 일하고을 - 어떤 생각없이!

희망 사항이 있으시면 여기를 클릭하십시오.

Answer 1

관련 항목 :http://jsfiddle.net/thirtydot/YRgwB/6/

• 나는 당신의 외부 table에 width:100%; table-layout:fixed;을 추가했다.
• div을 "와이드 테이블"주위에 overflow: hidden으로 감 쌉니다.
• 모든 최신 브라우저에서 작동합니다.

<table border="1" style="width:100%; table-layout:fixed;"> 
    <tr> 
     <td>first cell</td> 
     <td> 
      <div style="overflow:hidden; border:1px solid red;"> 
       <table> 
        <tr> 
         <td style="min-width:90px;">lot</td> 
         <td style="min-width:90px;">of</td> 
         <td style="min-width:90px;">content</td> 
        </tr> 
       </table> 
      </div> 
     </td> 
     <td>last cell</td> 
    </tr> 
<table>