Giving height to table and row in Bootstrap

user_2293570 0
Viewed 179590

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?

<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>
twitter-bootstrap css html
5 Answers

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.

<div class="col-md-6" style="line-height: 0.5">
                                <table class="table table-striped" >
                                    <thead>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Recorded Value</th>
                                        <th>Individual Score</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Respiratory Rate</td>
                                        <td>Doe</td>
                                        <td>john@example.com</td>
                                    </tr>
                                    <tr>
                                        <td>Respiratory Effort</td>
                                        <td>Moe</td>
                                        <td>mary@example.com</td>
                                    </tr>
                                    <tr>
                                        <td>Oxygon Saturation</td>
                                        <td>Dooley</td>
                                        <td>july@example.com</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

Try changing the value as it fits for you.

user_49501850
Related