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: </font>
</td>
<td align="left" width="400"><font face="Arial, Helvetica, sans-serif" size="2.5">
/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>
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.