CSS가있는 행 스파이크

내 웹 사이트 레이아웃에 이와 같은 표가 사용됩니다.CSS가있는 행 스파이크

<table> 
    <tr> 
    <td align="left" valign="top" rowspan="2" style="padding-right:41px;"> 
    </td> 
    <td align="left" valign="top" width="440px"> 
    </td> 
    </tr> 
    <tr> 
    <td align="left" valign="top" width="440px"> 
    </td> 
    </tr> 
</table>

2 행 2 열을 차지하는 왼쪽의 탐색 모음.

어떻게 이것을 CSS로 변환 할 수 있습니까? rowspan은 어떻게 처리합니까?

브라우저를 사용하여 테이블을 렌더링 할 수 있기 전에 브라우저가 모든 열을 먼저 렌더링해야하기 때문에 테이블을 사용하면 페이지 렌더링 속도가 느려지는 것을 읽었습니다. 따라서 하나의 열에 1000 개의 중첩 된 div가 있으면 다른 열은 렌더링 대기해야합니다. 사실입니까?

출처

2009-10-14 Tuviah

두 가지 질문이 있습니다. 속도 문제를 별도의 질문으로 게시하십시오. –

난 당신이 뭔가를하려는 생각 :

CSS :

div#navBar { 
    float: left; 
    padding-right: 41px; 
} 
div.nonHeader { 
    width: 440px; 
}

HTML : 헤더와 본문 된 div의 왼쪽에 네비게이션 바에 강제

<div id="navBar"></div> 
<div id="header" class="nonHeader"></div> 
<div id="bodyText" class="nonHeader"></div>

하는 고정 너비입니다.

navBar div가 고정 너비가 아니고 다른 두 가지가 가변적 인 것을 원하지 않는지 궁금합니다.

출처

2009-10-14 02:01:17

감사합니다. – Tuviah

위의 테이블 예제와 동일한 레이아웃을 수행하지 않습니다. 표의 예에서 스팬 된 행은 2 행과 동일한 높이를 차지합니다. CSS 예제에서 navBar는 필요한 높이 만 차지합니다. 또한 header & bodyText가 navBar보다 길면 내용이 navBar 주위를 둘러 싸게됩니다. –

CSS가있는 행 스파이크

답변

관련 문제