Geek asks and answers

Column not working

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

I tried to crack it, adding a registration around the images instead, but to no avail. How can I share these photos?

The code for creating 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>
+5
source share
2 answers

In your css, you apply border-spacing:5pxto the class table-right, but your table does not use it, even if it is contained in the div to which you applied, since you have

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

css, css div.

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


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

, ,

+7

jsFiddle, , <td>. , rightpadding, <td>, , CSS.

.rightpadding
{
    padding-right: 5px;
}

<td> :

<td class="valigned rightpadding">
0

More articles:


All Articles