एक छोटी ऊंचाई के साथ रिक्त तालिका पंक्ति डालने

Question

मेरे पास एक हेडर पंक्ति और कुछ डेटा पंक्तियों वाली एक तालिका है। मैं क्या करना चाहता हूं हेडर और डेटा पंक्तियों के बीच एक खाली पंक्ति बनाना है, लेकिन मैं चाहता हूं कि यह खाली पंक्ति अन्य पंक्तियों की तुलना में ऊंचाई में छोटी हो (ताकि इतना बड़ा अंतर न हो)।

मैं यह कैसे पूरा कर सकते हैं?

इस प्रकार तालिका के लिए मेरे एचटीएमएल मार्क-अप कोड है:

<table class="action_table"> 
    <tbody> 
     <tr class="header_row"> 
      <td>Header Item</td> 
      <td>Header Item 2</td> 
      <td>Header Item 3</td> 
     </tr>    
     <tr class="blank_row"> 
      <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td> 
     </tr> 
     <tr class="data_row"> 
      <td>Data Item</td> 
      <td>Data Item 2</td> 
      <td>Data Item 3</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

बस CSS नियम (और थोड़ा सुधार हुआ मार्क-अप) जोड़ने के नीचे तैनात और आपको वह परिणाम मिलना चाहिए जिसके बाद आप हैं।

सीएसएस

.blank_row 
{ 
    height: 10px !important; /* overwrites any other rules */ 
    background-color: #FFFFFF; 
} 

एचटीएमएल

<tr class="blank_row"> 
    <td colspan="3"></td> 
</tr> 

जब से मैं पता नहीं अपने वर्तमान स्टाइलशीट कैसा दिखाई देता है मैं सिर्फ मामले में !important संपत्ति जोड़ लिया है। यदि संभव हो, तो, आपको इसे हटा देना चाहिए क्योंकि एक शायद ही कभी स्टाइलशीट में !important घोषणाओं पर भरोसा करना चाहता है, क्योंकि बड़ी संभावना है कि वे इसे बाद में गड़बड़ कर देंगे।

Answer 2

इस प्रयास करें:

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td> 

Answer 3

आपको तालिका के अंदर स्थान बनाने के लिए अतिरिक्त तालिका पंक्ति की आवश्यकता नहीं है। this jsFiddle देखें।
(मैं रंग में अंतर हल्के भूरे रंग के हो गए हैं, ताकि आप इसे देख सकते हैं, लेकिन आप पारदर्शी है कि बदल सकते हैं।)

तालिका दुरुपयोग कर रहा है सिर्फ प्रदर्शन प्रयोजनों के लिए एक तालिका पंक्ति का उपयोग करना!

Answer 4

मैं कुछ भी काम करने के लिए नहीं मिल सका जब तक मैं इस सरल रेखा की कोशिश की:

<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p> 

जो आप अपने दिल की सामग्री को एक पूरक लाइन ऊंचाई (मैं [शायद टेबल का दुरुपयोग किया गया था तीन पाने के लिए भिन्न करने की अनुमति देता है पाठ के कॉलम (बक्से) जो मैं तो

नीचे के साथ पंक्तिबद्ध करने के लिए) मैं तो टिप्पणी की सराहना करेंगे

Answer 5

मैं जानता हूँ कि इस सवाल का पहले से ही एक जवाब है एक शौकिया हूँ, लेकिन मैं एक और भी आसान पता चला चाहता था ऐसा करने का तरीका ।

सिर्फ वह तालिका जहां एक रिक्त पंक्ति करना चाहते हैं में

<tr height = 20px></tr> 

जोड़ें। यह मेरे कार्यक्रम में ठीक काम करता है और यह शायद सबसे तेज़ समाधान संभव है।