Question

我在使用CSS设置表格样式时遇到问题。我正在使用div来包装表元素。当我将img标签插入一个单元格时会出现问题。它的高度变化。我试图设置行元素的高度没有运气。这是example。我的目标是添加图像以适应所有单元格空间而不更改其大小。我会感激所有的帮助。

注意：所有行必须具有相同的高度，且大小必须为百分比。

HTML

<div id="client">
<table>
    <col id="col1" />
    <col id="col2" />
    <col id="col3" />
    <tr>
        <td rowspan="3">
            <img id="profilePhoto" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTjelu9edzZ0fit_oqWGlHKS8koq1Vc56_u0XiYJynYbQmKSuQTCA" />
        </td>
        <td>2a</td>
        <td>3a</td>
    </tr>
    <tr>
        <td colspan="2">2b</td>
    </tr>
    <tr>
        <td colspan="2" class="row">2c</td>
    </tr>
    <tr>
        <td>1d</td>
        <td colspan="2">2d</td>
    </tr>
</table>

CSS

html {
height: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
body #client {
outline:solid 1px;
width: 75%;
height: 25%;
overflow: hidden;
}
table {
width: 70%;
height:100%;
table-layout:fixed;
}
td {
text-align: center;
border: solid thin;
overflow: hidden;
}
#profilePhoto {
height:100%;
width:100%;
}

Answer 1

如果您愿意放弃图像的简单居中，这应该可行：

td {
    position: relative;
}

#profilePhoto {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

演示：http://jsfiddle.net/PUqm8/1/

Answer 2

不是添加属性rowspan="3"，而是将图像放在div中，并为其隐藏溢出。此外，由于没有更多的行，所以不要忘记在第2行和第3行添加新单元

<td>
    <div style="height:30px;overflow:hidden;">
        <img id="profilePhoto" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTjelu9edzZ0fit_oqWGlHKS8koq1Vc56_u0XiYJynYbQmKSuQTCA"/>
    </div>
</td>

工作示例：http://jsfiddle.net/fdAqn/

Answer 3

尝试设置td height：

td{
    text-align: center;
    border: solid thin;
    overflow: hidden;
    height:10px;
}

高度行不匹配，因为存在img标记

3 个答案: