如何增加 HTML 表格中列的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2277332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I increase the width of a column in an HTML table?
提问by Ashley
How do I increase the width of a column in an HTML table?
如何增加 HTML 表格中列的宽度？
Below is my code. I am trying to get the second <td>tag in each row to expand so that there is more space between the input text box (1st <td>tag) and the name of the cookie and it's price (3rd <td>tag). Any ideas?
下面是我的代码。我试图让<td>每一行中的第二个标签展开，以便在输入文本框（第一个<td>标签）和 cookie 的名称及其价格（第三个<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 - .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 - .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 - .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 - .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 - .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">.95 for 1-5 boxes, .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 - .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>
回答by Pekka
You would give the column a width, either using inline styles
您可以使用内联样式为列指定宽度
<td style="width: 50%">
or, better, in a style sheet
或者，更好的是，在样式表中
td.column1 { width: 50% }
....
<td class="column1">
....
You can also specify padding for space between columns
您还可以为列之间的空间指定填充
td.column1 { padding-right: 64px }
by the way, the varying huge colspanvalues look very weird. What are they supposed to achieve?
顺便说一下，不同的巨大colspan值看起来很奇怪。他们应该达到什么目标？
回答by Binary Nerd
You can do it in pixels or as a percentage:
你可以用像素或百分比来做：
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="300">
<TR>
<TD WIDTH="100">Column 1</TD>
<TD WIDTH="200">Column 2</TD>
</TR>
</TABLE>
or
或者
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>
回答by Matt McCormick
<td style="width: 100px;">Cell data here</td>
Replace the number with whatever width you want. Note that the columns will be the max size throughout the table. So if column 2 is 200px in row 1 and 300px in row 2, the column will end up being 300px in all rows.
用你想要的任何宽度替换数字。请注意，列将是整个表中的最大大小。因此，如果第 2 列在第 1 行中为 200 像素，在第 2 行中为 300 像素，则该列最终将在所有行中为 300 像素。
回答by John
After you resolve the colspan issue that Jared Updike brought up, I'd check out using CSS and increasing the values for padding-left and padding-right.
在您解决了 Jared Updike 提出的 colspan 问题后，我会检查使用 CSS 并增加padding-left 和 padding-right 的值。
回答by Gal
If you need more space between table columns, you can use CSS margin/width properties with any value suitable for you. I would highly discourage including html visual formatting in your html code, albeit if you do, take the time to learn the meaning of some html properties, as "colspan" does not specify the width between tds, but combines them into one td.
如果您在表格列之间需要更多空间，您可以使用任何适合您的值的 CSS 边距/宽度属性。我非常不鼓励在您的 html 代码中包含 html 视觉格式，尽管如果您这样做，请花时间了解一些 html 属性的含义，因为“colspan”不指定 td 之间的宽度，而是将它们组合成一个 td。
