2009-04-15 6 views
0

프로젝트의 일종의 그리드를 만들고 있습니다. 그리드에는 하나의 특별한 요구 사항이 있습니다. 즉, 우리가 집안을 만들려고하는 이유입니다. 가운데 열은 스크롤 할 수 있어야합니다.자동 너비 및 오버플로 div

그림을 그리기 위해 다음과 같이 다소 차이가있는 격자를 만들었습니다. 왼쪽 중간 컨테이너와 오른쪽 컨테이너가있는 다른 컨테이너가있는 topcontainer div가 있습니다. 왼쪽 컨테이너에는 4 열로 나누어 진 사용자 정보가 들어 있습니다. 중간 div에는 특정 직원의 시간을 입력 할 수있는 텍스트 상자가있는 x 열 (관리자가 선택한 몇 주에 따라 다름)이 들어 있고 오른쪽 div에는 합계와 평균에 대한 일부 열이 있습니다.

내 질문에 대답하려면 : 서버 (asp.net 2.0)에서 데이터로 컨트롤을 렌더링하거나 자바 스크립트를 통해 행을 추가 할 때 userdata가 포함 된 왼쪽 열에 동적 너비가 있어야하며 사용자 따로 따로 왼쪽 컨테이너의 왼쪽 열을 필요로 할 때 자동으로 크기를 조정하고 왼쪽 컨테이너에 세로 스크롤 바가 나타나지 않도록 여분의 스크롤 막대가 나타납니다. 두 번째 topcontainer div가 최대 너비와 overflow-x가있는 topcontainer div : 스크롤, + 너비 : 자동 열이 트릭을 완료 했어야하지만 작동하지 않는 것 같습니다.

누구나 나를 올바른 길로 인도 할 수 있습니까? 내 설명이 이해되기를 바랍니다. 어쨌든 그림을 추가했습니다. [그림] 기본적으로 왼쪽 열이 내용의 너비에 맞추어 수평으로 동일한 수준으로 고정되기를 원합니다.

xx.

+0

많은 열과 같이 들립니다. 4 + x + some! 그들 중 일부에 대한 행을 말하고 싶습니까? – wheresrhys

+0

주제에서 벗어나지 만 내 웹 사이트에서 내 이메일 주소로 연결되는 내 picasaweb 계정을 게시하지 않겠습니다. – IEnumerator

+0

아니요, 실제로 모든 열입니다. 모든 행에는 일부 데이터 필드 + 최대 시간대 (= 1 년 반 동안의 주)가 포함됩니다. 좋은 점은 알지만, 회사 네트워크에서 사용할 수있는 유일한 서비스였습니다. 나는 오늘 저녁에 그것을 바꿀 것이다. – DavyR

답변

1

저는 테이블이없는 CSS 디자인을 훌륭히지지하지만 테이블이 필요한 경우 테이블을 사용하십시오.

다음은 내가 시작한 것으로 생각되는 코드입니다.

중간 열을 화면의 %로 설정하려고했지만 스크롤하지 않습니다. 내부 테이블의 크기로 확장됩니다.

세 개의 열에 각각 내부 테이블을 추가하여 콘텐츠를 표시해야합니다.

<html> 
<head> 
<style> 
table { 
    width: 100%; 
} 
.left { 
    background: red; 
    width: 100px; 
} 
.right { 
    background: blue; 
    width: 100px; 
} 
.middle { 
    background: green; 
    width: 800px; 
    display: block; 
    overflow: scroll; 
} 
.inner { 
    width: 2000px; 
    height: 100px; 
    background: black; 
    display: block; 
} 
</style> 
<body> 
<table> 
<tr><th class="left">Left</th><th class="middle">Middle Central block<table class="inner">Inner table</table></th><th class="right">Right</th></tr> 
</table> 
</body> 
</html> 
+0

Thx Jon, 나는 그걸로 놀았지만, 일반적인 테이블 행/셀과 같은 높이로 innableable 행/셀을 정렬하는 데 많은 어려움이있었습니다. 어쨌든 나는 시간이 없어서 더러운 Javascript 픽스를 사용했다. 하지만 여유 시간이있을 때 내 현재 코드를 리팩터링하는 것을 잊지 마라. – DavyR