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

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

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


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


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:

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