请查看此fiddle。如何使th中的图像彼此对齐?图片下方的某些标题似乎太长,将图片推高了一点。我尝试删除padding: 20px;并将其设置为固定高度,但失败了。有什么建议么?

的HTML

<table id="comparetable" class="blueshine">
<tr>
<td class="blank"></td>
<th><img class="thumbnail" src="image.jpg"><p>jhjhjhik iukiuk iukiu</th>
<th><img class="thumbnail" src="image.jpg"><p>jhjhjhik</th>
<th><img class="thumbnail" src="image.jpg"><p>jhj isdoi idi93</th>
</tr>
<tr>
<td class="rowTitle">Price</td>                                                                                   <td>$4.5</td>
<td>$1.5</td>
<td>$3.5</td>
<td>$1.5</td>
</tr>
.....
</table>


的CSS

/* START COMPARISON TABLE STYLES */
#comparetable {width: 100%; table-layout: fixed; text-align: center; margin: 4em 0; border-collapse: collapse; }
#comparetable tr {background: transparent!important;}
#comparetable td,
#comparetable th {padding: 20px; text-align: center;}
#comparetable td.rowTitle {text-align: left;}
.blank {background: none!important; border: none!important;}
.blueshine th {background-color: #b8cee2; font-size: 22px; color: #0c3053; text-align: center; font-weight: 600; text-shadow: 0 1px 0 #e0ecf7; border: 1px solid #9fb6c8; }    color: #222;
    font-size: 2em;
}

.thumbnail {width:80px;height:60px;}

最佳答案

th { vertical-align:top }

应该做到这一点:JSFiddle Demo

关于html - 图像在表格标题中彼此对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23825302/

10-09 13:55