我正在尝试使用CSS border-spacing属性将此表中的图像与空格分开,但由于某种原因它无法正常工作.您可以在这里看到图像如何仍然粘在JSFiddle中：
http://jsfiddle.net/nKgnq/
我试图通过在图像周围填充填充来破解它,但无济于事.如何将这些照片分开？
<div class="table-right">
<table class="fixed-height fixed-width fixed-cell">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?PHP the_field('details');?>
</td>
<td class="valigned">
<a href="<?PHP echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');?>">
<img class="detail-image" src="<?PHP echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');?>">
</a>
</td>
<td class="valigned">
<a href="<?PHP echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'tertiary-image');?>">
<img class="detail-image" src="<?PHP echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'tertiary-image');?>">
</a>
</td>
<td class="valigned">
<a href="<?PHP echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'fourth-image');?>">
<img class="detail-image" src="<?PHP echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'fourth-image');?>">
</a>
</td>
</tr>
</table>
</div>
解决方法
在你的css中你将border-spacing：5px应用到右表类,但你的表不使用它,即使它包含在你应用的div中,因为你有
table { /* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
在你的css中,这是一个更具体的选择器,将覆盖div中继承的css.如果你上课了
.table-spacing{
border-spacing:5px;
}
你可以将它应用于你的表标签
<table class="fixed-height fixed-width fixed-cell table-spacing">
我认为,这将以所要求的方式解决问题
