가로 스크롤이 가능하도록 HTML 표의 첫 번째 열을 수정하려면 어떻게합니까?

Question

4 열 3 행 테이블이 있습니다. 테이블에 가로 스크롤을 추가하고 싶지만 첫 번째 열은 고정 된 채로 있어야합니다.

내 HTML은 다음과 같이 구성되어있다 :

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

나는이 효과를 달성하는 데 사용할 수있는 어떤 CSS

?

Answer 1

별도의 div에서 두 개의 테이블을 만들 수 있습니다. 예를 들어 DEMO을 확인하십시오.

CSS

#col-one { 
    float: left; 
    background-color: red; 
} 
#col-two { 
    float: left; 
    background-color: green; 
} 

HTML

<div id="col-one"> 
<table width="200px" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>abc</td> 
    </tr> 
    <tr> 
    <td>123</td> 
    </tr> 
    <tr> 
    <td>abc</td> 
    </tr> 
</table> 
</div> 
<div id="col-two"> 
<table width="600px" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>123</td> 
    <td>abc</td> 
    <td>123</td> 
    </tr> 
    <tr> 
    <td>abc</td> 
    <td>123</td> 
    <td>abc</td> 
    </tr> 
    <tr> 
    <td>123</td> 
    <td>abc</td> 
    <td>123</td> 
    </tr> 
</table> 
</div>​ 

Answer 2

사용 display:table 옵션은 순수한 CSS와 DIV으로 수행하세요.

HTML

<div class="table"> 
    <div class="table_row"> 
     <div >xzv</div> 
     <div>fjgj</div> 
     <div>gj g</div> 
     <div>gdj hk</div> 
    </div> 
    <div class="table_row"> 
     <div >8080</div> 
     <div>7808</div> 
     <div>870g</div> 
     <div>80hk</div> 
    </div> 
</div> 
​ 

CSS 두 부문으로

body{margin:20px} 
    .table{ 
     display:table; 
     border-top:solid 1px red; 
     border-left:solid 1px red; 
     width:100% 
    } 
    .table_row{ 
     display:table-row 
    } 
    .table_row div{ 
     display:table-cell; 
     border-right:solid 1px red; 
     border-bottom:solid 1px red 
    }​ 

DEMO