2013-03-01 4 views
0

У меня есть таблица, первый ряд 4 пунктов (один Т.Р., 4 ТД), второй ряд 1 пункт (другой тр, 1 Td)ширина TD не изменяя CSS HTML

Я хочу второй элемент строки, чтобы выровнять центр , поэтому я хочу, чтобы td в нижней строке был шириной 100%, чтобы заполнить tr, но он не работает. Вот мой текущий код:

<table style="width:100%;"> 
<tbody><tr> 
<td style="padding:20px 5px 5px 5px; text-align:center;"> 
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;"> 
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');"> 
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item"> 
<input type="hidden" name="item_id" value=""> 
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete"> 
</form> 
</td> 
<td style="padding:20px 5px 5px 5px; text-align:center;"> 
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;"> 
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');"> 
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item"> 
<input type="hidden" name="item_id" value=""> 
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete"> 
</form> 
</td> 
<td style="padding:20px 5px 5px 5px; text-align:center;"> 
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;"> 
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');"> 
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item"> 
<input type="hidden" name="item_id" value=""> 
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete"> 
</form> 
</td> 

<td style="padding:20px 5px 5px 5px; text-align:center;"> 
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;"> 
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');"> 
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item"> 
<input type="hidden" name="item_id" value=""> 
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete"> 
</form> 
</td> 
</tr> 
<tr> 
<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;"> 
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;"> 
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');"> 
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item"> 
<input type="hidden" name="item_id" value=""> 
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete"> 
</form></td>  
</tr> 
</tbody></table> 

Может ли кто-нибудь увидеть, что я делаю неправильно?

Вот jsfiddle: JSFIDDLE

+0

добавить Colspan как это было предложено другими, http://jsfiddle.net/UqPXw/2/ – Anil

+0

Это не надлежащее использование таблиц. Да, ваши данные являются табличными, но они должны быть выражены как одна запись за строку, а не одна запись на ячейку. – cimmanon

+0

Как переформатировать стол: http://codepen.io/cimmanon/pen/qCrcu – cimmanon

ответ

1

Вам нужно добавить colspan="4" к этому последнему td:

<td colspan="4" style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;"> 
+0

полностью забыл об этом, спасибо большое! Репутация ++; – cwiggo

1

Самый простой метод будет добавить colspan свойство/атрибут в td тега. Например:

<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;" colspan="4"> 

Updated скрипка ссылка.

0

Глядя на ваш код, будет решать Объединение столбцов только в определенное время. Если вы поместите другой элемент во вторую строку, вам нужно будет использовать colspan = «2» во второй строке для двух ячеек.

Хорошим решением является использование div, span и css insted of table.