初學HTML，其中有這樣一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>運行結果如下：
將高度也設置爲100%，即
table
{
width:100%;
height:100%;
}
運行後，表格的高度沒有變化。原因：
百分比是相對的，table的寬度和高度，是根據父元素計算基數，得到基數*100% 的寬度和高度。
在這裏，table的父元素是body,body的默認寬度整個瀏覽器窗口的寬度，body在沒有設置具體值時會自動默認百分比來定義寬度。因此電腦顯示器尺寸不同body具體值也會不同。瀏覽器默認狀態 下，是沒有給body一個高度屬性的，因此當我們直接設置table的height:100%;時，不會產生任何效果。如果想設置table的高度，可以用像素來設置，即：height:50px;