CODEWITHSUNDEEP
htmlcss
vlyandra
vlyandra

Reputation: 145

Table border-spacing not working

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>

Upvotes: 11

Views: 37088

Answers (2)

andrwct
andrwct

Reputation: 371

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

Upvotes: 17

James Glass
James Glass

Reputation: 4300

It's really hard to understand your jsFiddle, but generically, one method is to put padding on your <td> tags. Add an additional class, for example rightpadding, to the <td> tags you want extra padding on, then define it in your CSS.

.rightpadding
{
    padding-right: 5px;
}

And your <td> tags would look like this:

<td class="valigned rightpadding">

Upvotes: 0

Related Questions