爲什麼表中沒有它的父DIV的100％

Question

我有以下標記：

<div class="wrapper"> 
    <table> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
    </table> 
</div> 

和CSS：

.wrapper { 
    height: 60px; 
} 

table { 
    height: 100%; 
    overflow: auto; 
} 

這裏是fiddle。 問題是table沒有選擇.wrapper的高度60px。爲什麼？

Answer 1

<table>默認爲display: table。

做成display: block。

Demo

.wrapper { 
 
    height: 60px; 
 
} 
 
table { 
 
    height: 100%; 
 
    overflow: auto; 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <table> 
 
    <tr> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
    </tr> 
 
    <tr> 
 
     <td>8</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

你應該表格的寬度設置爲100%因爲缺省表寬度爲auto。

table { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

jsfiddle

閱讀more有關表格的寬度