Разместить изображение в ячейке таблицы

Question

Разместить изображение в ячейке таблицы

0

Я читал здесь много сообщений, но эти решения, похоже, не работают для меня.

У меня проблема с строкой, потому что она должна соответствовать изображению без этих белых расстояний сверху:

#popuptable table, th, td, tr
table.popuptable {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: #2778AF !important;
    border-collapse: collapse;
    background-color: white;
}

table.popuptable th {
    margin-left: 20px !important;
    border-width: 0px;
    padding: 2px;
    border-style: ;
    border-color: #2778AF !important;
    background-color: white;
    -moz-border-radius: ;
}

table.popuptable td {
    border-width: 0px;
    padding: 2px;
    border-style: ;
    border-color: #2778AF !important;
    background-color: white;
    -moz-border-radius: ;
}
table.popuptable tr {
    border-width: 0px;
    padding: 2px;
    border-style: ; 
    border-color: #2778AF !important;
    background-color: white;
    -moz-border-radius: ;
}

Где моя проблема? Я пробовал все сочетания height я мог подумать.

Обновить Html для всплывающего окна:

<div id="hidden-BE" style="display:none;" class="popuptable">
<table border="0" width="400">
<tbody><tr>
<th colspan="2"> Kanton BE </th>
</tr>
<tr>
<td width="125px"><img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125"></td>
<td valign="top">
<b>Auswahl (Total: 4)</b><br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody></table>
</div>

Tate83 13 май 2014, в 14:57

Источник

0

Где соответствующий HTML ..? где изображение ..? Вы хотите сохранить соотношение сторон изображения?
T J 13 май 2014, в 12:55
0

Попробуйте поиграть с вашим margin в ячейках таблицы или в самой таблице. Также может быть полезно свойство valign .
dward 13 май 2014, в 12:55
0

margin не работает, но padding работает: td {padding-top: 0px; padding-bottom: 0px; } следующий раз я буду использовать divs ;-)
Tate83 13 май 2014, в 13:16

Показать ещё 1 комментарий

Теги:

html

css

3 ответа

1

Погрузите таблицы, сделайте всплывающее окно с divs, установите изображение в качестве фонового изображения для div:

<div class="flag"></div>

И установите размер фона: обложка;

http://www.w3schools.com/cssref/css3_pr_background-size.asp

J.T. 13 май 2014, в 11:28

1

используйте набор свойств, чтобы сделать изображение подходящим

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

fidel castro 13 май 2014, в 10:37

Ещё вопросы

Где соответствующий HTML ..? где изображение ..? Вы хотите сохранить соотношение сторон изображения?
Попробуйте поиграть с вашим margin в ячейках таблицы или в самой таблице. Также может быть полезно свойство valign .
margin не работает, но padding работает: td {padding-top: 0px; padding-bottom: 0px; } следующий раз я буду использовать divs ;-)

Marc Audet · Accepted Answer · 2014-05-13T10-28-00.000Z

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

Для HTML добавьте valign="top" в ячейку таблицы, в которой находится изображение:

<table border="0" width="400" class="popuptable">
    <tbody>
        <tr>
            <th colspan="2">Kanton BE</th>
        </tr>
        <tr>
            <td width="125px" valign="top">
                <img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125">
            </td>
            <td valign="top">
<b>Auswahl (Total: 4)</b>
                <br>
                <ul>
                    <li>Laur, Ernst Ferdinand (1871-1964)</li>
                    <li>Landis, Jakob (1926-)</li>
                    <li>Lampert, Octave</li>
                    <li>Laur-Schaffner, Sophie (1875-1960)</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Для CSS внесите следующие изменения:

table.popuptable td {
    border-width: 1px;
    padding: 0px; /* adds spacing above image, so remove... */
    border-style: solid;
    border-color: #2778AF !important;
    background-color: white;
    -moz-border-radius: ;
}

table.popuptable img {
    display: block;
}

table.popuptable ul {
    border: 1px dashed red;
    margin: 0 ;
}

Используйте display: block на img чтобы избавиться от дополнительного пространства ниже базовой линии, которое вставлено с встроенными элементами.

У вас также есть 2px padding в ячейках таблицы, которые вы можете удалить или сохранить по мере необходимости.

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

Смотрите скрипку: http://jsfiddle.net/audetwebdesign/HqQWY/