简体   繁体   中英

Keep 100% width table's text fixed

I have an application within a webpage and I am having issues keeping the inside text from shifting. My previous tables accept the min-width option and prevent stretching/moving of the text/td when you increase the website page(example being I have dual monitors so when I stretch over 2 monitors everything stays fixed except the footer).

I was wondering how to make each <td> text fixed within the page.

HTML:

<table cellpadding="0" cellspacing="0" border="1" width="100%" style="min-width:1400px">
    <tr bgcolor="silver">
        <td align="center" valign="middle" width="200"> <font face="Arial, Helvetica, sans-serif" size="2.5">
                Last Modified:&nbsp;</font>

        </td>
        <td align="left" width="400"><font face="Arial, Helvetica, sans-serif" size="2.5">
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ClassifiedAds/Index.aspx</font> <br/>
        <font face="Arial, Helvetica, sans-serif" size="1"> </font> 
        </td>
        <td align="left" valign="middle" width="300"><font face="Arial, Helvetica, sans-serif" size="2.5"></font> </td>
    </tr>

https://jsfiddle.net/avaz8sbh/

Check this fiddle, I have added a blank td with no width, so other columns won't resize when page is resized.

https://jsfiddle.net/afelixj/avaz8sbh/1/

Or You can also avoid width="300" from third td , so it only will grow on page resize, keeping the other two fixed width.

use % percentage instead of px and don't overflow 100% percent like

<td width="20%">
<td width="30%">
<td width="50%">

also remove style="min-width:1400px"

now your table will use 100% percent of page and fit it.

50 + 30 + 20 = 100

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM