तालिका सीमा-अंतरण

Question

काम नहीं कर रहा है, मैं सीएसएस सीमा-दूरी संपत्ति का उपयोग करके, इस तालिका में छवियों को स्थान के साथ अलग करने की कोशिश कर रहा हूं, लेकिन किसी कारण से यह काम नहीं कर रहा है। आप देख सकते हैं कि जेएसएफडल में छवियां अभी भी एक साथ कैसे फंस गई हैं: 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> 

Answer 1

अपने सीएसएस में आप table-right वर्ग के लिए border-spacing:5px लागू होते हैं, लेकिन अपनी मेज कि उपयोग नहीं करता है, भले ही यह div में निहित है आप उस के लिए आवेदन किया है, क्योंकि आप अपने सीएसएस है, जो एक अधिक विशिष्ट चयनकर्ता है और अधिक लिखेंगे विरासत में मिला है ग में

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

है div से एसएस। अगर आप की तरह

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

एक वर्ग बनाने आप अपनी तालिका टैग

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

को लागू कर सकते हैं और इस तरह का अनुरोध में समस्या का समाधान होगा, मुझे लगता है कि

Answer 2

यह वास्तव में समझने के लिए मुश्किल है अपने jsFiddle, लेकिन सामान्य रूप से, एक विधि अपने <td> टैग पर गद्दी डाल करने के लिए है। उदाहरण के लिए rightpadding, <td> टैग पर अतिरिक्त पैडिंग चाहते हैं, फिर इसे अपने सीएसएस में परिभाषित करें।

.rightpadding 
{ 
    padding-right: 5px; 
} 

और अपने <td> टैग इस प्रकार दिखाई देगा:

<td class="valigned rightpadding">