1

我试图弄清楚当浏览器窗口最大化到 24 英寸显示器并最小化到更常规的大小时，如何让我的文本不换行。我认为如果我为 HTML 表格中的单元格设置固定数量的空间，这将有所帮助，但我不知道如何......任何想法？我的显示器是 24 英寸，因此将其最小化到正常尺寸会导致包裹。我想获得帮助的主要 3 个文本领域是：

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>

每当我在不同的浏览器（IE、Firefox、Chrome）中打开我的网页时，这些单元格中的文本要么很好地放在一行上，要么换行。我不想让它包起来。我希望它们在每个浏览器上看起来都一样，我只是想知道有没有办法做到这一点？谢谢！

我的代码：

<!--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>
4

3 回答 3

0

Colspan 是允许该 TD 通过其他 TD 的单元格。您所做的看起来好像与 Divs 和宽度一起使用会更好。

并非所有的 TR 都具有相同数量的列，这是必须的。

尝试使用 div style="float: left; width: ###;" 将它们用作简单的容器并将它们设置为您想要的宽度。

于 2010-02-17T00:15:42.650 回答
0

您使用colspan不正确。您可以尝试以下方法：

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>
于 2010-02-17T00:16:43.773 回答
0

如果您不希望文本换行，您可以随时使用：

TD { white-space:nowrap }

否则，如果我想应用自定义规则，我通常会为每一列添加一个类，您未设置宽度的类将是弹性的，第 3 列应占用其余空间，例如：

TD.c1 { width: 200px; } 
TD.c2 { width: 200px; }
...
<td class="c1"></td>
<td class="c2"></td>
<td class="c3"></td>
于 2010-02-17T00:18:14.410 回答