views:

120

answers:

3

Hi, I am trying to figure out how to get my text to not wrap when the browser window is maximized to a 24 inch monitor and minimized to a more regular size. I think if I set a fixed number of space for a cell within an HTML table that this will help but I don't know how...any ideas? My monitor is 24 inches and so minimizing it to a normal size causes wrapping. My main 3 areas of text that I wanted to get help with are:

1 <td colspan="90"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>

2 <td colspan="40">If yes, note the text for the gift card:</td>

3<td colspan="150">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>

Whenever I open my webpage in different browsers (IE, Firefox, Chrome) the text within these cells either fits nicely on one line or it wraps. I don't want it to wrap. I want them to look all the same on each browser and I just wondered is there a way to do this? Thanks!

My code:

<!--Order Info. table -nested table 2 -->
<!--This is the first nested table within the main table -->
        <table border="2" width="65%" cellpadding="2">
        <!--Row 1 -->
                <tr>
                    <th colspan="3" align="left">Order Information</th>
                </tr>
        <!--Row 2 -->   
                <tr>
                    <td>QTY</td>
                    <td colspan="15"></td>
                    <td>Subtotal</td>
                    <td colspan="90"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>
                </tr>
        <!-- Row 3 -->  
                <tr>
                    <td><input name="quantitya" id="quantitya" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Nut - $10.99</td>
                    <td><input name="subtotala" id="subtotala" size="10" type="textbox" value="0"/></td>
                    <td colspan="40">If yes, note the text for the gift card:</td>
                </tr>
        <!-- Row 4 -->  
                <tr>
                    <td><input name="quantityb" id="quantityb" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Chip - $9.99</td>
                    <td><input name="subtotalb" id="subtotalb" size="10" type="textbox" value="0"/></td>
                    <td colspan="5"><textarea wrap="soft" name="giftcardtext" id="giftcardtext" rows="3" cols="20" ></textarea></td> 
                </tr>
        <!--Row 5 -->
                <tr>
                    <td><input name="quantityc" id="quantityc" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Macadamia Nut - $12.99</td>
                    <td><input name="subtotalc" id="subtotalc" size="10" type="textbox" value="0"/></td> 
                </tr>
        <!--Row 6 -->
                <tr>
                    <td><input name="quantityd" id="quantityd" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Oatmeal Raisin - $10.99</td>
                    <td><input name="subtotald" id="subtotald" size="10" type="textbox" value="0"/></td> 
                </tr>
        <!--Row 7 -->
                <tr>
                    <td><input name="quantitye" id="quantitye" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Dessert - $10.99</td>
                    <td><input name="subtotale" id="subtotale" size="10" type="textbox" value="0"/></td></td>
                    <td>Shipping:</td>
                    <td colspan="30"></td>
                    <td colspan="150">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>
                </tr>
        <!--Row 8 -->
                <tr>
                    <td><input name="quantityf" id="quantityf" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Butter - $7.99</td>
                    <td><input name="subtotalf" id="subtotalf" size="10" type="textbox" value="0"/></td></td>
                    <td>Total:</td>
                    <td colspan="30"></td>
                    <td colspan="1"><input name="totala" id="totala" size="3" type="textbox" value="0.00" /></td>
                </tr>
        <!--Row 9 -->
                <tr>
                    <td colspan="0"></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Subtotal</td>
                    <td><input name="subtotalg" id="subtotalg" size="10" type="textbox" value="0" /></td></td>
                </tr>
        </table>
A: 

Colspan is to allow that TD to go though the cells of other TDs. What you doing looks as if it would work much better with Divs and width's.

Not all of your TRs have the same number of columns in them and that is a must.

Try using div style="float: left; width: ###;" Use those as simple containers and set them to the width you want.

Iscariot
A: 

Your using colspan incorrectly. You could try something like:

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>
Binary Nerd
A: 

If you don't want your text to wrap you can always use:

TD { white-space:nowrap }

Otherwise If I want to apply custom rules, I normally add a class for each column, the ones you don't set widths for will be elastic, column 3 should take up the rest of the space e.g:

TD.c1 { width: 200px; } 
TD.c2 { width: 200px; }
...
<td class="c1"></td>
<td class="c2"></td>
<td class="c3"></td>
mythz