क्या मैं टेबल, tr या td के लिए न्यूनतम ऊंचाई का उपयोग कर सकता हूं?

120

मैं एक तालिका में प्राप्त कुछ विवरण दिखाने की कोशिश कर रहा हूं।

मैं चाहता हूं कि उत्पादों को दिखाने के लिए उस टेबल की न्यूनतम ऊंचाई हो। इसलिए यदि केवल एक उत्पाद है, तो तालिका में अंत में कम से कम कुछ सफेद स्थान होगा। दूसरी ओर यदि 5 या अधिक उत्पाद हैं, तो यह खाली जगह नहीं होगी।

मैंने इस सीएसएस के साथ कोशिश की है:

table,td,tr{
  min-height:300px;
}

लेकिन यह काम नहीं कर रहा है।

अग्रिम में धन्यवाद।

html css

— kilkadg
स्रोत

1

यदि आप हमारे लिए अपने कोड को आजमाना चाहते हैं तो यह मददगार होगा।

— mavrosxristoforos

39

यह एक अच्छा समाधान नहीं है, लेकिन इसे इस तरह आज़माएं:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

और div को न्यूनतम ऊंचाई पर सेट करें:

div {
    min-height: 300px;
}

आशा है कि आप यही चाहते हैं ...

— अर्नोल्ड जक
स्रोत

2

@ सैकिसान आपको डिव वर्ग देने की आवश्यकता है और फिर इस नियम को केवल उस कक्षा पर लागू करें

— Zachary Weixelbaum

यह बिल्कुल अच्छा नहीं है!

— अहमद

408

heightके लिए tdकी तरह काम करता है min-height:

td {
  height: 100px;
}

के बजाय

td {
  min-height: 100px;
}

टेबल सेल तब बढ़ेंगे जब सामग्री फिट नहीं होगी।

https://jsfiddle.net/qz70zps4/

— आवेलियनो दूर सू
स्रोत

2

मेरे गूगल क्रोम (संस्करण 47.0.2526.106 मी) एक विंडोज 7 पर चलने में, मैंने पाया है कि स्थापना के heightएक से tdवास्तव में एक के रूप में संसाधित किया जाता है paddingऊपर और नीचे है, जो कुछ लेआउट समस्या उत्पन्न हो के रूप में आपको लगता है कि यह वास्तव में एक है heightअंतरिक्ष। यह एक शैली के रूप में या देव उपकरणों में एक गणना शैली के रूप में नहीं दिखाता है, लेकिन जब आप अपने माउस को स्क्रीन पर दिखाए गए html तत्व के निरीक्षण में डालते हैं।

— फेल्प्प ओलिवेरा

लेकिन सवाल मिनट-ऊंचाई पर था कि काम नहीं करता है! क्या होता है यदि आपके पास एक लंबा पाठ है और ऊंचाई के साथ एक और रेखा की आवश्यकता है तो गड़बड़ हो जाएगी

— सीएमएस

@CMS की तरह, उन्होंने कहा min-heightकि heightहालांकि इसके बारे में नहीं पूछा क्योंकि @frank नीचे बताते हैं कि यह उसी के लिए समान व्यवहार करता है table td। तो शायद यह थोड़ा बेहतर स्पष्टीकरण की जरूरत है।

— dft

3

यह निश्चित रूप से स्वीकृत एक से बेहतर उत्तर है।

— जिंजीबाई

2

इस उत्तर ने मुझे काम के संभावित घंटों को बचाया है, इसका उत्तर होना चाहिए।

— ल्यूक प्रिंग

28

बिना हल के पहले पंक्ति में divछद्म तत्व का उपयोग किया जाता है । अपने HTML को साफ करें।::aftertdmin-height

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

— एलेक्स ओमेलनित्की
स्रोत

13

CSS 2.1 में, टेबल, इनलाइन टेबल, टेबल सेल, टेबल रो और पंक्ति समूहों पर 'न्यूनतम-ऊंचाई' और 'अधिकतम-ऊंचाई' का प्रभाव अपरिभाषित है।

तो एक div में सामग्री लपेटने का प्रयास करें, और div यहाँ एक jsFiddle देmin-height

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

— सोबिन ऑगस्टीन
स्रोत

5

यदि आप शैली सेट करते हैं = "ऊंचाई: 100px;" एक td पर अगर td में ऐसी सामग्री है जो सेल को इससे अधिक बढ़ाती है, तो यह td पर न्यूनतम ऊंचाई की कोई आवश्यकता नहीं होगी।

— खुलकर
स्रोत

0

टेबल्स और टेबल सेल min-heightसंपत्ति का उपयोग नहीं करते हैं, उनकी सेटिंग heightन्यूनतम-ऊँचाई होगी क्योंकि तालिकाओं का विस्तार होगा यदि सामग्री उन्हें खींचती है।

— आगू डोंडो
स्रोत

-1

बस अपनी तालिका पंक्ति के कक्षों में न्यूनतम ऊंचाई के css प्रविष्टि का उपयोग करें। पुराने ब्राउज़रों पर भी काम करता है।

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>

— सैकी सैन
स्रोत