तालिका पंक्ति ऊंचाई सेट करना

Question

मेरे पास यह कोड है:

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

पंक्तियाँ बहुत दूर तक फैली हुई हैं। मैं एक साथ लाइनों को करीब से चाहता हूं।

मैंने जो किया वह निम्नलिखित सीएसएस को जोड़ने के लिए था, लेकिन यह कुछ भी बदलने के लिए प्रतीत नहीं होता है।

.topics tr { height: 14px; }

मैं क्या गलत कर रहा हूं?

Comments

संबंधित: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

— थिलो

Answer 1

इसे इस्तेमाल करे:

.topics tr { line-height: 14px; }

Comments

मुझे समझ में नहीं आता कि यह इतने वोट क्यों हैं, यह समस्या का समाधान नहीं करता है। यह केवल तभी काम करता है जब आपके पास केवल 1 पंक्ति का पाठ हो tr। यह समाधान रेखा की ऊंचाई निर्धारित करता है, ऊंचाई नहीं tr।

— बेनआर

जैसा कि बाद की एक टिप्पणी में बताया गया है। ऊँचाई आपकी सबसे बड़ी सामग्री की ऊँचाई से बड़ी होनी चाहिए। अन्यथा, यह केवल न्यूनतम ऊंचाई के रूप में सबसे बड़ी सामग्री की ऊंचाई का उपयोग करेगा। और हाँ, यह केवल पाठ की एक पंक्ति के लिए काम करता है।

— वरुण चटर्जी जी '

यह केवल एक पंक्ति के पाठ के मामले में उपयोगी है।

— shekhardtu

Answer 2

इसके लिए विशेषता सेट करने का प्रयास td करें:

.topic td{ height: 14px };

Comments

काम करने के लिए प्रतीत नहीं होता (क्रोमियम 12 / Ubuntu 11.04) ।

— डेविड कहते हैं

गंभीरता से? मुझे लगा कि यह हमेशा काम करेगा। यह अब निश्चित रूप से करता है। वैसे भी यह समाधान मुझे सबसे अच्छा लगता है क्योंकि जिस तरह से टेबल सेल काम करते हैं, उनकी सामग्री का विस्तार करना है। इतने heightमें एक tdप्रभावी रूप से न्यूनतम ऊंचाई है, जो इस मामले में वास्तव में आप क्या चाहते हैं

— साइमन_वेअर

@ मेरे मामले में भी केवल @daveसमाधान काम किया है। line-heightया तो साथ काम नहीं किया trया td। निश्चित नहीं है कि इसका समय के साथ कुछ करना है क्योंकि मूल पोस्ट छह साल पुरानी है और HTML / css नियमों में से कुछ अब तक बदल गए हैं क्योंकि अधिकांश ब्राउज़र अब HTML5 का उपयोग कर रहे हैं।

— nam

इसके अलावा, मेरे अनुभव में , यदि आप tr पर ऊँचाई सेट करते हैं और उसके बाद td पर 100% ऊँचाई या कोई ऊँचाई रखते हैं, तो मेरा मानना ​​है कि सिस्टम को लगता है कि ऊँचाई td पर सेट है और यह ऊँचाई का अनुसरण नहीं करती है tr और पंक्ति डिफ़ॉल्ट ऊंचाई पर सेट है। तो बस td पर ऊँचाई सेट करें। यही कारण है कि मैंने इस जवाब को

— उकेरा

Answer 3

यदि आप border-collapse: collapse;अपने टेबल पर CSS स्टेटमेंट रखते हैं तो आप कुछ अतिरिक्त रिक्ति भी निकाल सकते हैं ।

Answer 4

मैंने पाया कि मेरे उद्देश्यों का सबसे अच्छा जवाब था:

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

यह white-space: nowrapमहत्वपूर्ण है क्योंकि यह आपकी पंक्ति की कोशिकाओं को कई लाइनों में टूटने से रोकता है।

मैं उदाहरण के लिए अनुगामी फुलस्टॉप जोड़कर अतिप्रवाहित पाठ को अच्छा बनाने के text-overflow: ellipsisलिए अपने thऔर tdतत्वों को जोड़ना पसंद करता हूं , उदाहरण के लिएToo long gets dots...

Answer 5

लाइन-ऊंचाई केवल तब काम करती है जब यह बड़ी हो और तब की सामग्री की वर्तमान ऊंचाई <td>। इसलिए, यदि आपके पास तालिका में 50x50 आइकन है, तो trपंक्ति-ऊंचाई 50px (+ गद्दी) से छोटी नहीं होगी।

चूँकि आप पहले से ही पैडिंग सेट कर चुके हैं, 0यह कुछ और होना चाहिए,
उदाहरण के लिए एक बड़ा फ़ॉन्ट-आकार tdजो आपके 14px से बड़ा है।

Answer 6

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो paddingअपने tdएस को देखें।

Answer 7

एक बार जब मैं इनलाइन सीएसएस का उपयोग करके एक विशेष मूल्यवान पंक्ति की ऊंचाई तय करने की आवश्यकता है ..

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

Answer 8

मेरे लिए मैंने पैडिंग का उपयोग करने का निर्णय लिया। यह वही नहीं है जो आपको चाहिए, लेकिन कुछ मामलों में उपयोगी हो सकता है।

table td {
    padding: 15px 0;
}