html - 使图像适合表格单元格

Question

我在这里阅读了很多帖子，但这些解决方案似乎对我不起作用。

我对该行有疑问，因为它应该适合图像而顶部没有那些白色间距:

#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>

Answer 1

这是一种调整布局以获得良好图像匹配的方法。

对于 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 ;
}

在 img 上使用 display:block 去除插入内联元素的基线下方的额外空间。

表格单元格中还有 2px 的填充，您可能希望根据需要删除或保留这些填充。

最后，ul 上的默认边距可能会导致文本 block 的高度高于图像，因此请根据需要进行调整。

参见 fiddle :http://jsfiddle.net/audetwebdesign/HqQWY/