如何让表格适合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中的浏览器大小？

回答

相关问题