Setting Minimum Width in Relative Width of Table

nasaboy007 · 04-05-2006, 05:07 PM

I have a table with a relative width (percentage) so that it will stretch to fill the screen appropriately. The only thing is that in it, i have a row of images that cannot be smaller than the width of the original layout. Because of this, when the browser window is reduced in size, everything shrinks except for the images, which hang out on the sides uglily. heres an excerpt of my code(containing the images that hang out):

Code:

<table height="79" width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
  	  <td class="bordervert"></td>
	  	<td width="18"><img src="img/head2.gif"></td>
<td width="84"><a href="index.shtml" class="headlinks"><img src="img/head3.gif"></a></td>
<td width="86"><a href="academics/index.shtml" class="headlinks"><img src="img/head4.gif"></a></td>
<td width="86"><a href="activities/index.shtml" class="headlinks"><img src="img/head5.gif"></a></td>
<td width="86"><a href="overview/index.shtml" class="headlinks"><img src="img/head6.gif"></a></td>
<td width="86"><a href="pfa/index.shtml" class="headlinks"><img src="img/head7.gif"></a></td>
<td width="86"><a href="events/index.shtml" class="headlinks"><img src="img/head8.gif"></a></td>
<td width="86"><a href="admissions/index.shtml" class="headlinks"><img src="img/head9.gif"></a></td>
<td width="85"><a href="resources/index.shtml" class="headlinks"><img src="img/head10.gif"></a></td>
	<td><img src="img/blank.gif"></td>
	<td width="3"><img src="img/head11.jpg"></td>
	<td class="bordervert"></td>
  </tr>
</table>

i was wondering if there is a way (through either css or html) to set it so that there is a MINIMUM width of the table, meaning that if the browser window is made REALLY small, a horizontal scrolling bar will appear, and prevent the images from flooding over. i still want it to have the percentage value, though, because it needs to fill the higher resolution screens.

CreedFeed · 04-05-2006, 08:21 PM

Assign a CSS class to the table and in your definition of this class use:

Code:

.class {
    min-width: 100px;
}

This will not work in IE though. In order for this to work in IE, download the following javascript and include it in the header of your page:

http://www.doxdesk.com/software/js/minmax.html

04-05-2006, 05:07 PM	THREAD STARTER #1 (permalink)
nasaboy007 Senior Member Join Date: Jul 2005 Location: NJ Posts: 1,219	Setting Minimum Width in Relative Width of Table I have a table with a relative width (percentage) so that it will stretch to fill the screen appropriately. The only thing is that in it, i have a row of images that cannot be smaller than the width of the original layout. Because of this, when the browser window is reduced in size, everything shrinks except for the images, which hang out on the sides uglily. heres an excerpt of my code(containing the images that hang out): Code: <table height="79" width="95%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td class="bordervert"></td> <td width="18"><img src="img/head2.gif"></td> <td width="84"><a href="index.shtml" class="headlinks"><img src="img/head3.gif"></a></td> <td width="86"><a href="academics/index.shtml" class="headlinks"><img src="img/head4.gif"></a></td> <td width="86"><a href="activities/index.shtml" class="headlinks"><img src="img/head5.gif"></a></td> <td width="86"><a href="overview/index.shtml" class="headlinks"><img src="img/head6.gif"></a></td> <td width="86"><a href="pfa/index.shtml" class="headlinks"><img src="img/head7.gif"></a></td> <td width="86"><a href="events/index.shtml" class="headlinks"><img src="img/head8.gif"></a></td> <td width="86"><a href="admissions/index.shtml" class="headlinks"><img src="img/head9.gif"></a></td> <td width="85"><a href="resources/index.shtml" class="headlinks"><img src="img/head10.gif"></a></td> <td><img src="img/blank.gif"></td> <td width="3"><img src="img/head11.jpg"></td> <td class="bordervert"></td> </tr> </table> i was wondering if there is a way (through either css or html) to set it so that there is a MINIMUM width of the table, meaning that if the browser window is made REALLY small, a horizontal scrolling bar will appear, and prevent the images from flooding over. i still want it to have the percentage value, though, because it needs to fill the higher resolution screens. __________________ Hacksar.com - Your source for random computer tips and tricks! MySiteMemberships.com - Keep track of your site registration information! Like my post? Rep is appreciated!

04-05-2006, 08:21 PM	#2 (permalink)
CreedFeed NamePros Member Join Date: Apr 2006 Posts: 186	Assign a CSS class to the table and in your definition of this class use: Code: .class { min-width: 100px; } This will not work in IE though. In order for this to work in IE, download the following javascript and include it in the header of your page: http://www.doxdesk.com/software/js/minmax.html __________________ QuakeOne.com - Quake 1 Resurrection ------------------ CreedFeed - Feed Your Need For Creed

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)