बूटस्ट्रैप में तालिका और पंक्ति को ऊंचाई दे रहा है

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं, मैं टेबल और पंक्ति को ऊंचाई देने की कोशिश कर रहा हूं लेकिन मेरे लिए कुछ भी काम नहीं कर रहा है।बूटस्ट्रैप में तालिका और पंक्ति को ऊंचाई दे रहा है

मैंने लाइन-ऊंचाई और तालिका के अन्य गुणों को सेट करने का प्रयास किया, मैं ऊंचाई कैसे बढ़ा सकता हूं ??

<style> 
    div#description { 
     background-color: gray; 
     height: 25%; 
     border: 2px black; 
    } 
    tr { 
     line-height: 25px; 
    } 
    .container { 
     height: 100% 
    } 
    table { 
     height: 100% 
    } 
    #topics tr { 
     line-height: 14px; 
    } 
</style> 
</head> 

<body> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-md-7 col-xs-10 pull-left"> 
       <p>Hello</p> 
       <div class="table-responsive"> 
        <table class="table table-bordered "> 
         <tbody> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 


         </tbody> 
        </table> 
       </div> 


      </div> 
      <div class="col-md-5 col-xs-8 pull-right" id="description"> 
       <p>Hello2</p> 
      </div> 
     </div> 
    </div>

स्रोत

2013-12-16 anam

आप को स्वीकार करना चाहिए एक जवाब। – gsamaras

http://jsfiddle.net/isherwood/gfgux

html, body { 
    height: 100%; 
} 
#table-row, #table-col, #table-wrapper { 
    height: 80%; 
} 

<div id="content" class="container"> 
    <div id="table-row" class="row"> 
     <div id="table-col" class="col-md-7 col-xs-10 pull-left"> 
      <p>Hello</p> 
      <div id="table-wrapper" class="table-responsive"> 
       <table class="table table-bordered ">

स्रोत

2013-12-16 14:30:43 isherwood

<tr> के लिए सिर्फ

tr { 
    line-height: 25px; 
    min-height: 25px; 
    height: 25px; 
}

यह बूटस्ट्रैप भी साथ काम करता है निर्धारित किया है। 100% ऊंचाई के लिए, 100%कुछ का 100% होना चाहिए। इसलिए, आपको एक कंटेनर, या शरीर के लिए एक निश्चित ऊंचाई निर्धारित करना होगा। मुझे लगता है कि आप पूरे पृष्ठ 100% है, तो (उदाहरण) बनना चाहता हूँ:

body { 
    height: 700px; 
} 
.table100, .row, .container, .table-responsive, .table-bordered { 
    height: 100%; 
}

का संभावित हल स्थापित करने के लिए नहीं एक स्थिर ऊंचाई व्यूपोर्ट के अनुसार कोड में ऊंचाई के लिए मजबूर कर रहा है:

$('body').height(document.documentElement.clientHeight);

सभी इस बेला में ऊपर ->http://jsfiddle.net/LZuJt/

नोट: मुझे परवाह नहीं है आप 25% ऊंचाई है #description पर, और 100% तालिका पर ऊंचाई। मान लीजिए यह सिर्फ एक उदाहरण है। और ध्यान दें कि clientHeight सही नहीं है क्योंकि दस्तावेज़ एक आईफ्रेम है, लेकिन आपको अपने स्वयं के प्रोजेक्ट में चित्र मिलेगा :)

स्रोत

2013-12-16 14:47:41 davidkonrad

शरीर की ऊंचाई निर्धारित करने के लिए जेएस का उपयोग करने के बजाय आप 100vh (vh - \t व्यूपोर्ट की ऊंचाई के 1% से संबंधित) का उपयोग कर सकते हैं: https://www.w3schools.com/cssref/css_units.asp) –

मेरे लिए क्या काम किया गया सामग्री के चारों ओर एक div जोड़ रहा था। मूल रूप से मेरे पास यह था। टीडी पर लागू सीएसएस का कोई प्रभाव नहीं पड़ा।

 <td>   
      @Html.DisplayFor(modelItem => item.Message)   
     </td>

तो मैं एक div में सामग्री लपेटा जाता है और सीएसएस के रूप में उम्मीद

 <td> 
      <div class="largeContent"> 
       @Html.DisplayFor(modelItem => item.Message) 
      </div> 
     </td>

स्रोत

2014-02-21 16:41:47 Jobrocol

सीएसएस काम किया:

tr { 
width: 100%; 
display: inline-table; 
height:60px;    // <-- the rows height 
} 

table{ 
height:300px;    // <-- Select the height of the table 
display: -moz-groupbox; // For firefox bad effect 
} 
tbody{ 
    overflow-y: scroll;  
    height: 200px;   // <-- Select the height of the body 
    width: 100%; 
    position: absolute; 
}

Bootply: http://www.bootply.com/AgI8LpDugl

स्रोत

2014-05-07 13:24:51 pbenard

बूटस्ट्रैप में तालिका और पंक्ति को ऊंचाई दे रहा है

उत्तर

संबंधित मुद्दे