在 Bootstrap 中为表格和行赋予高度答案

【问题标题】：Giving height to table and row in Bootstrap在 Bootstrap 中为表格和行赋予高度
【发布时间】：2019-11-05 21:50:08
【问题描述】：

我正在使用 Bootstrap 3，我正在尝试为 table 和 row 提供高度，但对我没有任何作用。

我尝试设置line-height和table的其他属性，请问如何增加高度？

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

【问题讨论】：

你应该接受一个答案。

标签： html css twitter-bootstrap

【解决方案1】：

对于刚刚设置的<tr>

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

它也适用于引导程序。对于100% 高度，100% 必须是 something 的 100%。因此，您必须为其中一个容器或主体定义一个固定高度。我猜你希望整个页面都是 100%，所以（示例）：

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

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

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

以上所有内容 -> http://jsfiddle.net/LZuJt/

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

【讨论】：

可以使用 100vh（vh - 相对于视口高度的 1%：w3schools.com/cssref/css_units.asp）而不是使用 js 来设置 body 高度

【解决方案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;
}

引导层：http://www.bootply.com/AgI8LpDugl

【讨论】：

【解决方案3】：

对我有用的是在内容周围添加一个 div。原来我有这个。应用于 td 的 css 没有效果。

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

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

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

【讨论】：

【解决方案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 ">

【讨论】：

【解决方案5】：

对我有用的简单解决方案如下，用 div 包裹表格并更改 line-height，此 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>

尝试更改适合您的值。

【讨论】：