Question

I’m trying to separate the images in this table with space, using the CSS border-spacing property, but for some reason it’s not working. You can see how the images are still stuck together in the JSFiddle here: http://jsfiddle.net/nKgnq/

I’ve tried hacking it by putting padding around the images instead, to no avail. How can I get these pictures apart?

The code to generate the table is here:

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

Answer 1

In your css you apply border-spacing:5px to the table-right class, but your table doesn’t use that, even though it’s contained in the div you have that applied to, because you have

table { /* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}

in your css, which is a more specific selector and will over-write the inherited css from the div. if you make a class like

.table-spacing{
   border-spacing:5px;
}

you can apply that to your table tag

<table class="fixed-height fixed-width fixed-cell table-spacing">

and that will solve the problem in the way requested, I think