how to let table fit the browser size in html?

https://stackoverflow.com/questions/22162194

html
css

19-10-2022
( words)

Information request New solution

Question

<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>

the code works well in FF, but if i resize the browser, the "header" is still in center, but the table and the bottom border has exceed the view, how to fix this so that no matter how i re-size the browser, the content can still fit. Thanks befor resize

after resize

No correct solution

OTHER TIPS

you need to use max and min width

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

Or make it 100%

Your <table> has a fixed-width. Changing it to a % value (i.e. 100%) will ensure it fits the width of the browser.

Here's a jsfiddle approximating what you want: http://jsfiddle.net/9paab/

You need to set

<table style='width:100%'>

with this table fit to its container's width

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow