CSS DIV 용기 표시 : DIV

Question

부동 테이블 내가 가진 여러 된 DIV

를 통해 DIV 범위를 가질 필요가 다음 CSS의 DIV 테이블 그리드는

나는 데 문제가 사이의 Z- 인덱스 관련이있을 것으로 보인다 브라우저. 이 코드는 Firefox에서 올바르게 보이지만 지금까지 테스트 해본 IE 또는 Chrome에서는 작동하지 않습니다. 올바르게 CSS에서 내 DIV를 플로팅하는 방법을 알고 싶습니다. 표시하도록 설정된 내 DIV 주변의 클래스 ".blockdata"를 참조하십시오. 테이블이 오버플로 스크롤을 허용합니다.

차이점을 보려면 Firefox 및 Chrome 또는 IE를 확인하십시오.

당신은 여기 내 예를 볼 수 있습니다 여기에 여기 내 CSS

/*column holder is not related to the grid - its used for the demo to force .table-inner to scroll */ 

.column-holder { 
width:600px;  
} 
.blockdata { 
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0); 
border: 1px solid #999999; 
border-radius: 5px; 
bottom: 5px; 
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.8) inset; 
color: #666666; 
font-size: 12px; 
left: 0; 
overflow: hidden; 
padding: 4px; 
position:relative; 
width:200px; 
z-index:999; 
} 
.container { 
display: table; 
width:100%; 
table-layout:fixed; 
position:relative; 
z-index:1; 
} 
.row { 
display: table-row; 
position:relative; 
} 
.column { 
display: table-cell; 
border-color: #DDDDDD; 
border-style: solid; 
border-width: 0px 0px 1px 1px ; 
padding:5px; 
width:120px; 
} 

의 된 DIV

<div class="column-holder"> 

<div class="table-outer"> 
<div class="table-inner"> 


<!-- start div grid --> 
<div class="container"> 
    <div class="row"> 
     <div class="column">Column 0</div> 
     <div class="column">Column 1</div> 
     <div class="column">Column 2</div> 
     <div class="column">Column 3</div> 
     <div class="column">Column 4</div> 
     <div class="column">Column 5</div> 
     <div class="column">Column 6</div> 
     <div class="column">Column 7</div> 
     <div class="column">Column 8</div> 
     <div class="column">Column 9</div> 
    </div> 
    <div class="row"> 
     <div class="column">Column 0</div> 
     <div class="column">Column 1</div> 
     <div class="column">Column 2</div> 
     <div class="column"> 
     <div class="blockdata"> block data</div> 
     </div> 
     <div class="column">Column 4</div> 
     <div class="column">Column 5</div> 
     <div class="column">Column 6</div> 
     <div class="column">Column 7</div> 
     <div class="column">Column 8</div> 
     <div class="column">Column 9</div> 
    </div> 
    <div class="row"> 
     <div class="column">Column 0</div> 
     <div class="column">Column 1</div> 
     <div class="column">Column 2</div> 
     <div class="column">Column 3</div> 
     <div class="column">Column 4</div> 
     <div class="column">Column 5</div> 
     <div class="column">Column 6</div> 
     <div class="column">Column 7</div> 
     <div class="column">Column 8</div> 
     <div class="column">Column 9</div> 
    </div> 

</div> 
<!-- end div grid --> 

</div> 
</div> 
</div> 

Answer 1

이 Z- 인덱스와 아무 상관이있다을 사용하여 HTML 테이블 http://jsfiddle.net/LjMhs/

. .blockdata의 유일한 배경 속성은 다음과 같습니다 사업부는 투명 파이어 폭스 외에 다른 브라우저에 따라서

background: -moz-linear-gradient(center top , #FFFFFF 0%, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0);

: D 당신의 솔루션이 작동

http://jsfiddle.net/eLz73/