4

HTML テーブルの列の幅を広げるにはどうすればよいですか?

以下は私のコードです。<td>各行の 2 番目のタグを展開して、入力テキスト ボックス (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>
4

5 に答える 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>
于 2010-02-17T00:12:11.643 に答える
5

インラインスタイルを使用して、列に幅を与えます

<td style="width: 50%">

または、より良い方法として、スタイル シートで

td.column1 { width: 50% }
....
<td class="column1">
....

列間のスペースにパディングを指定することもできます

td.column1 { padding-right: 64px }

ちなみに、さまざまな巨大なcolspan値は非常に奇妙に見えます。彼らは何を達成することになっていますか？

于 2010-02-17T00:10:45.417 に答える
0

Jared Updike が提起した colspan の問題を解決したら、CSS を使用してpadding-left と padding-rightの値を増やして確認します。

于 2010-02-17T00:19:34.063 に答える
0

表の列間にさらにスペースが必要な場合は、CSS の margin/width プロパティを適切な値で使用できます。「colspan」はtds間の幅を指定せず、それらを1つのtdに結合するため、htmlコードにhtmlビジュアルフォーマットを含めることは強くお勧めしません。

于 2010-02-17T00:12:05.717 に答える
0 
<td style="width: 100px;">Cell data here</td>

数値を任意の幅に置き換えます。列はテーブル全体で最大サイズになることに注意してください。したがって、列 2 が行 1 で 200px、行 2 で 300px の場合、列はすべての行で 300px になります。

于 2010-02-17T00:13:58.567 に答える