Просеивание внутри ячейки таблицы, несмотря на td {padding: 0}

Question

У меня сейчас довольно неприятная ошибка. Проблема довольно проста: в верхней и нижней частях таблицы есть огромная прокладка, Я помещаю в него объект (в данном случае, изображение).

То, что я пытаюсь сделать, это разместить в Grid-таблицу различные объекты в таблице, поэтому вы увидите все эти дополнительные ячейки. начальная ширина и высота таблицы и ячеек, я просто указываю интервал col/row ячейки, в которой объект будет размещен на основе ширины/высоты объекта.

Я искал и применил множество решений, таких как cellpacing, cellpadding = 0, padding: 0, блок отображения img, но ничего не работает здесь.

td{border:1px solid black; padding:0}

<table style="width:600pt; height:800pt; table-layout: fixed;" cellspacing="0" cellpadding="0"> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
    <td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td rowspan="15" colspan="15" ><img style="width:298pt; height:292pt;" src="http://i.imgur.com/mrxsiZ3.jpg"/> 
 
</td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td rowspan="18" colspan="30" ></td></tr> 
 
</table >

Img находится в 8-м ряду и 8-го столбца сетки, но он скользит довольно много вниз в клетке из-за заполнения. Проверка ячейки в браузере устранит проблему.

Fiddle можно найти here для вашего удобства

Answer 1

Обивка только там, потому что ваша сила в таблице, чтобы иметь высоту 800 пикселей. Если вы удалите свойство height, отступы исчезнут.

td{border:1px solid black; padding:0;}

<table style="width:600pt; table-layout: fixed;" cellspacing="0" cellpadding="0"> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
<td colspan="30" ></td></tr> 
 
<tr> 
 
    <td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td rowspan="15" colspan="15" ><img style="width:298pt; height:292pt;" src="http://i.imgur.com/mrxsiZ3.jpg"/> 
 
</td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr> 
 
<tr> 
 
<td rowspan="18" colspan="30" ></td></tr> 
 
</table >

Answer 2

Если я правильно понять, вы хотите, чтобы изображение на вершине? Если в этом случае используется вертикальное выравнивание.

<td rowspan="15" colspan="15" style="vertical-align:top"> 
    <img style="width:298pt; height:292pt;" src="http://i.imgur.com/mrxsiZ3.jpg"/> 
</td> 

Demo Fiddle

Answer 3

Если вы хотите, чтобы таблица в том, что высота, ваш другой вариант установить свойство высоты непосредственно на тд. Это позволит скорректировать все остальные tds соответственно, чтобы добавить к вашей высоте таблицы. Но проблема в том, что tds для tr всегда имеют одинаковую высоту. Поэтому, если вы установите высоту на несколько tds в пределах одного и того же tr, высота для всех tds будет установлена ​​на наибольшую высоту td.

Это может показаться запутанным, но в принципе вы не можете однозначно настроить данные таблицы на изображение, если ваши изображения не имеют одинакового размера. Вы можете получить «эти» данные таблицы, чтобы удалить «отступы», но как только вы добавите больше изображений, у вас будет отступы по крайней мере на одной из ваших фотографий, если они не того же размера.

Это решение может работать для вас, но я бы подумал об использовании структуры дизайна. Сетка может быть проще для такого рода вещей.