표에 맞게 비율에 맞게 표를 조정하십시오.

Question

내 문제는 간단하며 예제를 찾을 수 없어서 대답이 불가능합니다.

나는 CSS와 HTML로 만들어진 테이블을 가지고있다. DIV 내부에 들어갈 수 있도록 이미지처럼 비례하여 크기를 조정하고 싶습니다. 나는 너희들이 테이블이 어떻게 생겼는지 알고 있지만 나는 이미지로 테이블을 변환 할 그 불가능이 가능합니다 가정

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

아래를 추가, 그래서이 질문을 제출하는 몇 가지 코드를 제출해야처럼 보인다 그러면 이미지의 크기를 재조정 할 수 있습니까?

Answer 1

테이블의 너비를 포함 된 div의 100 %로 설정 한 다음 td >을 테이블의 비율로 설정할 수 있습니다. http://jsfiddle.net/9VFQ5/

<div class="container"> 
    <table> 
     <tr> 
     <td>Test 1</td> 
     <td>Test 2</td> 
     </tr> 
    </table> 
</div> 


.container { 
    width: 25%; 
    background-color: red; 
} 
table { 
    width: 80%; 
    margin: 0 auto; 
    background-color: blue; 
} 
td { 
    width: 50%; 
    color: white; 
} 

Answer 2

.container { 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 

 
table { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background-color: red; 
 
} 
 

 
td { 
 
    width: 50%; 
 
    color: white; 
 
    padding: 1rem; 
 
    background-color: green; 
 
} 
 

 
th { 
 
    color: black; 
 
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 container"> 
 
    <table> 
 
    <tr> 
 
     <th>1st COLUMN</th> 
 
     <th>2nd COLUMN</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Table Data1 Row1</td> 
 
     <td>Table Data2 Row1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table Data1 Row2</td> 
 
     <td>Table Data2 Row2</td> 
 
    </tr> 
 
    </table> 
 
</div>