如何讓表格適合html中的瀏覽器大小？

<html> 
    <body> 
    <h1>header</h1> 
    <header style='border-bottom:solid black; height:64px'> 
     <h1 style = 'text-align: left; display:inline-block'> 
     $CName($CSymbol)</h1> 
     <span style='padding-left:7px'>$firstN $secondN($thirdN%)</span> 
    </header> 

<table width='1340px'> 
<tr> 
    <td>Prev Close:</td> 
    <td align='right' style='padding-right:30px;'>$prevClose</td> 
    <td>Day's Range:</td> 
    <td align='right'>$daysRange</td> 
<tr> 
    <td>Open:</td> 
    <td align='right' style='padding-right:30px;'>$open</td> 
    <td>52wkRange:</td> 
    <td align='right'>$yearsRange</td> 
</tr> 
<tr> 
    <td>Bid:</td> 
    <td align='right' style='padding-right:30px;'>$bid</td> 
    <td>Volume:</td> 
    <td align='right'>$volume</td> 
</tr> 
<tr> 
    <td>Ask:</td> 
    <td align='right' style='padding-right:30px;'>$ask</td> 
    <td>Avg Vol(3m):</td> 
    <td align='right'>$avgVol</td> 
</tr> 

<tr> 
    <td>1y Target Est:</td> 
    <td align='right' style='padding-right:30px;'>$targetEst</td> 
    <td>Market Cap:</td> 
    <td align='right'>$marketCap</td> 
</tr> 
</table> 

</body> 
</html>

該代碼在FF中運行良好，但是如果我調整瀏覽器大小，「標題」仍位於中心，但表格和底部邊界已超過視圖，因此無論如何修復重新調整瀏覽器的大小，內容仍然適合。由於 befor resize 如何讓表格適合html中的瀏覽器大小？

after resize

來源

2014-03-04 user2810081

你<table>有一個固定寬度。將其改爲％值（即100％）將確保它適合瀏覽器的寬度。

這裏有一個的jsfiddle接近你想要什麼：http://jsfiddle.net/9paab/

來源

2014-03-04 03:22:37 Marcatectura

並且邊框將與表一起使用？我沒有改變邊界的寬度，但它仍然適合，爲什麼呢？ – user2810081

邊框是一種樣式，而不是元素，並且它不作爲DOM中的對象存在。邊框從它應用的元素（'header'）獲取寬度。 – Marcatectura

沒錯，但是我沒有指定header元素的寬度？ – user2810081

你需要使用的最大和最小寬度

<table style="max-width:1340px; min-width:800px'>

或使其100％

來源

2014-03-04 03:25:17

您需要設置

<table style='width:100%'>

with此表適合其容器的寬度

來源

2014-03-04 05:02:26 Kamlesh

如何讓表格適合html中的瀏覽器大小？

回答

相關問題