Giving height to table and row in Bootstrap

Question

I am using Bootstrap 3   i am trying to give height to table and row  but nothing is working for me    I tried setting line-height and other properties of table  how can I increase height    lt style gt      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         lt  style gt   lt  head gt    lt body gt       lt div class  container  gt            lt div class  row  gt               lt div class  col-md-7 col-xs-10 pull-left  gt                   lt p gt Hello lt  p gt                   lt div class  table-responsive  gt                       lt table class  table table-bordered   gt                           lt tbody gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                                   lt td gt  lt  td gt                               lt  tr gt                             lt  tbody gt                       lt  table gt                   lt  div gt                 lt  div gt               lt div class  col-md-5 col-xs-8 pull-right  id  description  gt                   lt p gt Hello2 lt  p gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

The simple solution that worked for me as below, wrap the table with a div and change the line-height, this line-height is taken as a ratio.

_x000D_

<div class="col-md-6" style="line-height: 0.5">_x000D_
                                <table class="table table-striped" >_x000D_
                                    <thead>_x000D_
                                    <tr>_x000D_
                                        <th>Parameter</th>_x000D_
                                        <th>Recorded Value</th>_x000D_
                                        <th>Individual Score</th>_x000D_
                                    </tr>_x000D_
                                    </thead>_x000D_
                                    <tbody>_x000D_
                                    <tr>_x000D_
                                        <td>Respiratory Rate</td>_x000D_
                                        <td>Doe</td>_x000D_
                                        <td>[email protected]</td>_x000D_
                                    </tr>_x000D_
                                    <tr>_x000D_
                                        <td>Respiratory Effort</td>_x000D_
                                        <td>Moe</td>_x000D_
                                        <td>[email protected]</td>_x000D_
                                    </tr>_x000D_
                                    <tr>_x000D_
                                        <td>Oxygon Saturation</td>_x000D_
                                        <td>Dooley</td>_x000D_
                                        <td>[email protected]</td>_x000D_
                                    </tr>_x000D_
                                    </tbody>_x000D_
                                </table>_x000D_
                            </div>

_x000D_

Try changing the value as it fits for you.

User · Answer

What worked for me was adding a div around the content  Originally i had this   Css applied to the td had no effect            lt td gt                           Html DisplayFor modelItem   gt  item Message                      lt  td gt    Then I wrapped the content in a div and the css worked as expected          lt td gt               lt div class  largeContent  gt                   Html DisplayFor modelItem   gt  item Message               lt  div gt           lt  td gt

User · Answer

For the  lt tr gt  s just set   tr      line-height  25px     min-height  25px     height  25px      It works with bootstrap also  For the 100  height  100  must be 100  of something  Therefore  you must define a fixed height for one of the containers  or the body  I guess you want the entire page to be 100   so  example     body       height  700px     table100   row   container   table-responsive   table-bordered        height  100       A workaround not to set a static height is by forcing the height in code according to the viewport       body   height document documentElement clientHeight     all the above in this fiddle -  http   jsfiddle net LZuJt   Note   I do not care that you have 25  height on  description  and 100  height on table  Guess it is just an example  And notice that clientHeight is not right since the documentElement is an iframe  but you ll get the picture in your own projekt

User · Answer

CSS   tr   width  100   display  inline-table  height 60px                     lt -- the rows height     table   height 300px                   lt -- Select the height of the table  display  -moz-groupbox        For firefox bad effect   tbody    overflow-y  scroll          height  200px                  lt -- Select the height of the body   width  100     position  absolute      Bootply   http   www bootply com AgI8LpDugl

User · Answer

http   jsfiddle net isherwood gfgux  html  body       height  100      table-row   table-col   table-wrapper       height  80       lt div id  content  class  container  gt       lt div id  table-row  class  row  gt           lt div id  table-col  class  col-md-7 col-xs-10 pull-left  gt               lt p gt Hello lt  p gt               lt div id  table-wrapper  class  table-responsive  gt                   lt table class  table table-bordered   gt

[html] Giving height to table and row in Bootstrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap