테이블의 일부 영역 스크롤바가 필요합니까?

Question

이미지를 찾으십시오. jan과 dec 열을 볼 수 있습니다. 두 열의 공간 영역에 대한 스크롤 막대를 배치해야하는데 한 칸에서 몇 달이 걸립니다.

이 테이블 수 있습니까?

제발 도와주세요!

감사

위 질문은 아주 좋은 대답을 얻었다.

다른 도움말!

http://jsfiddle.net/anglimass/Ty29z/

이미지를 찾아 당신은 (공급 업체 1 인용)을 볼 수 있으며 (공급 업체 6 인용) 열, 나는 감각이 열 공간 영역에서 두 개의 열에 대한 스크롤 막대를 배치해야하십시오 (공급 업체 1 인용) - (공급 업체 6 인용) 공급 업체 세부 정보가 있습니다.

Answer 1

이 시도 :

HTML

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"> 
<tbody> 
    <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th colspan="1" rowspan="5" style="border: medium none ; width: 100px; vertical-align: top;"> 
      <div class="inner-table"> 
       <table style="text-align: left; width: 500px; border:none" border="1" cellpadding="2" cellspacing="2"> 
       <tbody> 
        <tr> 
         <th>Header 1</th> 
         <th>Header 2</th> 
         <th>Header 3</th> 
         <th>Header 4</th> 
        </tr> 
        <tr> 
         <td>a</td> 
         <td>a</td> 
         <td>a</td> 
         <td>a</td> 
        </tr> 
        <tr> 
         <td>b</td> 
         <td>b</td> 
         <td>b</td> 
         <td>b</td> 
        </tr> 
        <tr> 
         <td>c</td> 
         <td>c</td> 
         <td>c</td> 
         <td>c</td> 
        </tr> 
       </tbody> 
       </table> 
      </div> 
     </th> 
     <th>Header 4</th> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>b</td> 
     <td>b</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>c</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</tbody> 
</table> 

CSS

.inner-table { 
    width:100px; 
    overflow-x:scroll; 
} 

th { 
    height:20px; 
} 

데모

http://jsfiddle.net/andresilich/caq8F/4/

CSS를 사용하여 동일한 스타일을 쉽게 얻을 수 있습니다.

:: EDIT :: 코드를 정리하고 스크롤 막대의 일부 공간을 포함하도록 피들을 업데이트했습니다.

Answer 2

나는 이것이 가능하다고 생각하지 않습니다. colgroup을 스타일링 해 보았지만이 방법은 효과가 없었습니다.

Example of tried solution.

내가 생각하는 유일한 다른 방법은 중간에 래퍼 div가있는 세 개의 개별 테이블로 테이블을 분할하는 것입니다.

Example of split up table with div separator.