logo标签列表

如何在HTML表格中增加列的宽度？

htmlhtml-tablewidthcell
5

如何增加HTML表格中列的宽度？

以下是我的代码。我想让每行中的第二个<td>标签扩展，以便在输入文本框（第1个<td>标签）和cookie名称及其价格（第3个<td>标签）之间有更多空间。有什么建议吗？

<!--Order Info. table -nested table 2 -->
<!--This is the first nested table within the main table -->
        <table border="0" 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>
2
我认为colspan让你告诉td占据右侧的下一个td单元格，对实际像素宽度没有影响...你的表格中真的有90或40列吗？ - Jared Updike
正如@Jared所暗示的那样，colspan是列数，而不是像素宽度。里面有一个colspan=180！哎呀！ - pavium
你正在错误地使用colspan标签，正如其他人所指出的那样。把它们拿掉，从那里开始。 - Matt McCormick
@Jared、pavium和Matt - 感谢你们指出我在使用colspan时的错误。我以为我用得对，但显然不是。@Jared和@pavium- 不，我没有90、40或180列显示出来。我只是这样做是因为这是我能想到的唯一增加单元格宽度的方法。有什么建议吗？ - Ashley
5个回答
7

您可以使用像素或百分比进行设置：

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="300">
<TR>
<TD WIDTH="100">Column 1</TD>
<TD WIDTH="200">Column 2</TD>
</TR>
</TABLE>

或者

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>
5
您可以给该列设置宽度，可以使用内联样式进行设置。
<td style="width: 50%">

或者更好的方式是在样式表中实现。
td.column1 { width: 50% }
....
<td class="column1">
....

你可以指定列之间的填充以增加间距。
td.column1 { padding-right: 64px }

顺便提一句，不同的colspan值看起来很奇怪。它们的目的是什么？

0
<td style="width: 100px;">Cell data here</td>

将数字替换为所需的宽度。请注意，列将在整个表格中保持最大尺寸。因此，如果第2列在第1行中为200px，在第2行中为300px，则该列将在所有行中最终变为300px。

0
如果您需要在表格列之间增加更多的空间，可以使用CSS margin/width属性，并设置适合您的任何值。我强烈不建议在HTML代码中包含HTML可视化格式，但是如果您这样做，请花时间学习一些HTML属性的含义，因为“colspan”并不指定td之间的宽度，而是将它们合并为一个td。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接