1高度行不匹配，因爲img標籤的存在

我用CSS設計表格時遇到問題。我使用div來包裝一個表格元素。當我將一個img標籤插入一個單元格時出現問題。 IT的高度發生變化。我試圖設置行元素的高度，但沒有運氣。這裏是example。我的目標是添加圖像以適應所有單元格空間而不更改其大小。感謝所有幫助1高度行不匹配，因爲img標籤的存在

注意：所有行必須具有相同的高度，大小必須以百分比表示。

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%; 
}

來源

2013-03-30 ajorquera

我不太清楚你的要求。你的意思是你想要圖像保持其自然大小，或者細胞保持其自然大小，還是其他的東西？ – metadept

無論圖像@metadept如何，單元格都必須保持其大小。 – ajorquera

如果你願意放棄你的圖像容易定心，這應該工作：

td { 
    position: relative; 
} 

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

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

來源

2013-03-30 05:15:52 metadept

如果圖像可以佔用所有單元格空間，它會更好，但是您的解決方案是我見過的最好的解決方案。謝謝 – ajorquera

添加屬性rowspan="3"相反的，把圖像在一個div，並隱藏其溢出。此外，由於世界上沒有更多行跨度，不要忘了在第二和第三排

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

來源

2013-03-30 05:18:25

表必須具有rowspan屬性，並且高度必須以百分比形式 – ajorquera

嘗試設置TD高度：

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

來源

2013-03-30 05:26:50 Sharun

高度必須以百分比@slaker – ajorquera

1高度行不匹配，因爲img標籤的存在

回答

相關問題