2010-02-16 4 views
2

Как увеличить ширину столбца в таблице HTML?Как увеличить ширину столбца в таблице HTML?

Ниже приведен мой код. Я пытаюсь получить второй тег <td> в каждой строке для расширения, чтобы было больше места между текстовым полем ввода (1-й <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 - $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 столбцов в таблице? –

+0

Поскольку @Jared подразумевается, 'colspan' - количество столбцов, а не ширина пикселя. Там 'colspan = 180' там! Ой! – pavium

+0

Вы неправильно используете тег colspan, как указывали другие. Вытащите их и начните оттуда. –

ответ

2

Вы можете сделать это в пикселях или в процентах:

<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

Если вам нужно больше места между столбцами таблицы, вы можете использовать свойства поля/ширины CSS с любым значением, подходящим для вас. Я бы очень обескуражил включение html визуального форматирования в ваш html-код, хотя, если вы это сделаете, найдите время, чтобы узнать значение некоторых свойств html, поскольку «colspan» не указывает ширину между tds, но объединяет их в один td.

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

Заменить номер с любой ширине вы хотите. Обратите внимание, что столбцы будут максимальными по всей таблице. Поэтому, если столбец 2 равен 200px в строке 1 и 300px в строке 2, столбец будет составлять 300 пикселей во всех строках.

0

После того, как вы разрешите проблему colspan, которую поднял Джаред Апдайк, я бы проверил использование CSS и увеличил значения для padding-left and padding-right.

Смежные вопросы