Переменная высота ячейки таблицы HTML?

Question

<table>
    <tr>
        <th><img src="image.jpg" /></th>
        <td>row1 column2</td>
        <td>row1 column3</td>
        <td>row1 column4</td>
    </tr>
</table>

Результаты
Если высота img равна 10px, высота всех ячеек в этом ряду равна 10px.Добавление границы к результатам тд, когда тд выглядит выше, чем img.Примечание: img содержится в th, потому что я не хочу границы вокруг img, только td.

Желаемые результаты

Как показано на рисунке выше, высота ТД должна быть регулируемой, чтобы их верхняя и нижняя границы могли быть выровнены с изображением.

Исследования
Использование CSSуказывать высоту в тд только работает, если высота больше, чем высота img (другими словами, тд не может быть меньше, чем img).Дополнительные исследования показывают, что именно так работают таблицы.

Answer 1

Я не уверен, что понимаю, вы хотите, чтобы граница была "внутри" вместо "снаружи"?

Это легко сделать с помощью CSS и div s, установив отрицательный marginравно border-width.

Есть ли причина, по которой вы используете table s?

Answer 2

Вы можете использовать следующие свойства CSS, чтобы поля с добавленной границей работали как Internet Explorer, в этом случае ширина границы будет рассчитываться в размере модели блока:

-moz-box-sizing: border-box;  
-webkit-box-sizing: border-box;  
box-sizing: border-box;

source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-did-internet-explorer-get-the-box-model-right/

Answer 3

Вообще говоря, в таблице элементы <td> имеют одинаковый размер в строке, то есть назначение строк, вы можете выровнять содержимое ячейки внутри строки, но в противном случае строка будет иметь согласованный рост. Высота строки по умолчанию равна максимальной высоте любой ячейки в ней. Горизонтальные границы обычно проходят по строкам.

Единственный способ изменить это на самом деле - использовать rowspan с дополнительными строками, добавленными для позиционирования, но это крайне уродливо.

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