टीआर की ऊंचाई कैसे तय करें?

Question

क्या एक मेज पर एक पंक्ति (ट्र) की ऊंचाई तय करना संभव है?

समस्या तब दिखाई देती है जब मैं ब्राउज़र की विंडो को सिकोड़ता हूं, कुछ पंक्तियाँ बजने लगती हैं, और मैं पंक्ति की ऊँचाई ठीक नहीं कर पाता।

मैंने कई तरीके आजमाए: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

मैं IE7 का उपयोग कर रहा हूँ

अंदाज

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTML कोड।

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>

Answer 1

टेबल्स iffy हैं (कम से कम, IE में) जब यह ऊंचाई को ठीक करने की बात आती है और पाठ को लपेटने की नहीं। मुझे लगता है कि आप पाएंगे कि पाठ को एक divतत्व के अंदर रखना है , जैसे:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}

<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>

इस तरह, divसेल और पाठ की ऊँचाई बढ़ सकती है div, सेल / पंक्ति को समान ऊंचाई पर रखते हुए कोई फर्क नहीं पड़ता कि खिड़की का आकार क्या है।

Comments

सलाह के लिए धन्यवाद, यह काम करने लगता है, लेकिन यह थोड़ा गड़बड़ लग रहा है।

— आमरा

मदद करने के लिए खुश :-) दुर्भाग्य से, गन्दा कोड आमतौर पर हैक्स और वर्कअराउंड में होता है।

— एंडी ई

मैं [कोड] .container {चौड़ाई: 100% का उपयोग करता हूं; अधिकतम ऊंचाई: 40 पीएक्स; छिपा हुआ सैलाब; } [/ कोड] और [कोड] <div class = 'container'> </ div> [/ code]।

— सेसम टिम्मरमैन

मैंने एक ही तरीका किया है, एक <th> टैग के अंदर एक div डाल दिया और यह अच्छी तरह से काम किया। मेरा यह मुद्दा केवल क्रोम पर था। FFox, Safari और IE ने टेबल हेडर पर निर्धारित ऊंचाई का अच्छी तरह से समर्थन किया। साझा करने के लिए धन्यवाद! :)

— मेरियो रोड्रिग्स

सफारी में काम नहीं करता है ... आपको div पर वास्तविक ऊंचाई और चौड़ाई निर्धारित करने की आवश्यकता है, न केवल td

— Radu Simionescu

Answer 2

कोशिकाओं में से एक में ऊंचाई डालने की कोशिश करें, जैसे:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

हालाँकि, ध्यान दें कि आप सेल को उस सामग्री की तुलना में छोटा नहीं बना पाएंगे जिसके लिए यह आवश्यक है। उस स्थिति में आपको पहले पाठ को छोटा करना होगा।

Comments

मुझे पूरा यकीन है कि आप HTML विशेषताओं में "px" का उपयोग नहीं करते हैं।

— अनफॉलो

मुझे पूरा यकीन है कि आप शैली विशेषता में उपयोग कर सकते हैं।

— बुरक डोबुर

Answer 3

इसकी सामग्री tdकी प्राकृतिक ऊंचाई से कम ऊंचाई निर्धारित करना

चूँकि तालिका कोशिकाएँ कम से कम इतनी बड़ी होनी चाहती हैं कि वे अपनी सामग्री को संलग्न कर सकें, यदि सामग्री में कोई स्पष्ट ऊँचाई नहीं है, तो कोशिकाओं को मनमाने ढंग से आकार दिया जा सकता है।

कोशिकाओं का आकार बदलकर, हम पंक्ति की ऊंचाई को नियंत्रित कर सकते हैं।

एक तरह से यह करने के लिए, एक साथ सामग्री स्थापित करने के लिए है absoluteके भीतर स्थिति relativeसेल, और सेट heightसेल की, और leftऔर topसामग्री के।

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}

<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>

table-layoutसंपत्ति

ऊपर दिए गए स्निपेट में दूसरी तालिका ने table-layout: fixedआवेदन किया है, जिससे माता-पिता के भीतर, उनकी सामग्री की परवाह किए बिना, कोशिकाओं को समान चौड़ाई दी जा सकती है।

Caniuse.com के अनुसार , table-layoutSept 12, 2019 के उपयोग के संबंध में कोई महत्वपूर्ण संगतता समस्याएं नहीं हैं ।

या बसwidth तीसरी तालिका के अनुसार विशिष्ट कोशिकाओं पर लागू होते हैं ।

इन विधियों से कोशिका को प्रभावी ढंग से बनाए जाने योग्य सामग्री से युक्त किया position: absoluteजा सकता है, जिसे लागू करके कुछ मनमाना परिमाण दिया जा सकता है।

बहुत अधिक बस ...

मुझे शुरू से ही इसके बारे में सोचना चाहिए था; हम सभी सामान्य तरीकों से ब्लॉक स्तर की तालिका सेल सामग्री में फेरबदल कर सकते हैं, और सामग्री के प्राकृतिक आकार को पूरी तरह से नष्ट किए बिना position: absolute, हम तालिका को यह पता लगाने के लिए छोड़ सकते हैं कि चौड़ाई क्या होनी चाहिए।

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}

<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>

Comments

अंत में एक जवाब जो आशाजनक लगता है! जैसे ही मैं काम पर जाऊंगा, मैं इसे भूल जाऊंगा, तो मैं प्रतिक्रिया दूंगा।

— जीरोमेज

एक जादू की तरह काम किया! (चेतावनी है कि यह हटा text-align: centerऔर अन्य केंद्रित चालें ... हालांकि यह पर निर्भर करता है position: absolute)

— jeromej

यह मेरे मामले में ऊंचाई के लिए काम करता है, लेकिन उपयोग करते समय postion: absolute, मैं स्वचालित सेल चौड़ाई खो देता हूं। पंक्ति की ऊँचाई पर नियंत्रण रखते हुए तालिका की सही तरह से सेल चौड़ाई की गणना करने का तरीका खोजने की कोशिश करना। कोई विचार?

— राख

@ यश - सामग्री के आकार को प्रभावी ढंग से नष्ट करने के बाद पूरी तरह से स्वचालित चौड़ाई रखने के लिए मैं तुरंत किसी भी तरह से नहीं सोच रहा हूं, लेकिन हम तालिका कोशिकाओं को मनमाने ढंग से चौड़ा करने के लिए मजबूर कर सकते हैं। मैंने एक तरीका दिखाने के लिए उदाहरण स्निपेट का विस्तार किया है जो आपकी मदद कर सकता है। मैं इसे कुछ और विचार दूंगा, और अधिक जानकारी

— जोड़ूंगा

धन्यवाद फ्रेड। ध्यान दें कि मैं स्तंभों को एक निश्चित आकार देने के लिए हेडर (<th>) रख सकता हूं, लेकिन फिर मुझे चिंता है कि हेडर बहुत संकीर्ण या बहुत चौड़ा हो सकता है।

— राख

Answer 4

एक td के अंदर div डालकर यह मेरे काम आया।

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>

Answer 5

आपकी तालिका की चौड़ाई 90% है जो इसके कंटेनर के सापेक्ष है।

यदि आप पृष्ठ को निचोड़ते हैं, तो आप संभवतः टेबल की चौड़ाई को भी निचोड़ रहे हैं। कोशिकाओं की चौड़ाई बहुत कम हो जाती है और ब्राउज़र ऊंचाई बढ़ाकर क्षतिपूर्ति करता है।

ऊँचाई को अछूता रखने के लिए, आपको यह सुनिश्चित करना होगा कि कोशिकाओं की चौड़ाई इरादा सामग्री को पकड़ सकती है। तालिका की चौड़ाई को ठीक करना संभवत: कुछ है जिसे आप आज़माना चाहते हैं। या शायद मेज की न्यूनतम चौड़ाई के साथ खेलते हैं।

Answer 6

मुझे वह परिणाम प्राप्त करने के लिए ऐसा करना पड़ा जो मैं चाहता था:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

इसने केवल सेल या डिव के साथ काम करने से इनकार कर दिया और दोनों की जरूरत थी।

Answer 7

ऐसा इसलिए है क्योंकि शब्द लपेट रहे हैं और नई लाइनों पर जा रहे हैं इसलिए टीआर खींच रहे हैं। यह आपकी समस्या को ठीक करना चाहिए:

overflow:hidden;

टीआर शैलियों में रखो, हालांकि यह काम करना चाहिए, क्यों न इसे केवल खिंचाव 0 पर दें

पुनश्च। मैं इसे इतना न नफरत XD परीक्षण किया है

Comments

नफरत नहीं है, लेकिन IE में msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx पर TD तत्व द्वारा समर्थित शैलियों की एक सूची है । overflowउनमें से एक नहीं है।

— एंडी ई