Question

我正在使用bootstrap 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>

Answer 1

对于<tr>刚设置

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

它也适用于bootstrap。对于100%高度，100%必须是某事的100％。因此，您必须为其中一个容器或主体定义固定高度。我想你希望整个页面都是100％，所以（例子）：

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

不设置静态高度的解决方法是根据视口强制代码中的高度：

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

以上所有这些小提琴 - ＆gt;的 http://jsfiddle.net/LZuJt/

注意：我不在乎你25%身高#description，身高100%身高。猜猜这只是一个例子。请注意clientHeight不正确，因为documentElement是一个iframe，但你会在自己的项目中得到图片：）

Answer 2

<强> CSS ：

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

Answer 3

对我来说有用的是在内容中添加div。本来我有这个。应用于td的Css没有效果。

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

然后我将内容包装在div中，css按预期工作

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

Answer 4

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 ">

Answer 5

如下所示对我有用的简单解决方案，用div包装表并更改line-height，此行高作为比率。

<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>

尝试更改适合您的值。

给引导程序中的表和行提供高度

5 个答案: