Как заставить изображение полностью заполнить ячейку таблицы

Я прочитал много форумов и попробовал решение там, но ни один из них не работал у меня все еще есть небольшой разрыв между всеми моими изображениями. Вот код: 

<table id="Table">
            <tr>
                <td id="td1"><h2>~ Curling ~</h2></td>
                <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" 
                width="100%" height="100%" border="2" alt=""/></td>
                <td id="td1"><h2>~ Curling ~</h2></td>
            </tr>
</table>


#td1 { width: 32%;vertical-align: text-top; }
#td2 { padding-right: 5px; padding-top: 5px; }
2 7
html css html-table

2 ответа:

Изображение является встроенным элементом и имеет некоторое пустое пространство под ним из-за того, как оно выровнено с базовой линией.

Чтобы исправить это, попробуйте: 

#td2 img {display: block;}

Или 

#td2 img {vertical-align: bottom;}

Демонстрация скрипки: http://jsfiddle.net/audetwebdesign/WxrvC/

Обратите внимание , что вы установили 5px отступ в верхней и правой части изображения, и я предположил, что это для целей стиля.

Также, id атрибуты должны быть уникальными на странице, использовать class, намного проще в обслуживании и позволяет для более легкого повторного использования правил CSS.

12

Различные браузеры отображают html-элементы с различным заполнением по умолчанию / полями / интервалами и т. д.. вы можете попробовать сбросить их следующим образом: 

#table td {padding: 0px; margin: 0px;}
#table {border-spacing: 0px;}
2