Html 在 Bootstrap 中为表格和行提供高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20612535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Giving height to table and row in Bootstrap
提问by anam
I am using Bootstrap 3 , i am trying to give height to tableand row, but nothing is working for me .
我正在使用 Bootstrap 3，我试图给tableand提供高度row，但没有任何东西对我有用。
I tried setting line-heightand other properties of table, how can I increase height?
我尝试设置line-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>
回答by davidkonrad
For the <tr>'s just set
对于<tr>刚刚设置的
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) :
它也适用于引导程序。对于100%高度，100%必须是 100% 的东西。因此，您必须为其中一个容器或主体定义固定高度。我猜你希望整个页面都是 100%，所以（示例）：
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/
以上所有在这个小提琴 - > 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 clientHeightis not right since the documentElement is an iframe, but you'll get the picture in your own projekt :)
注意：我不在乎你的25%身高#description和100%桌子上的高度。猜猜这只是一个例子。请注意，这clientHeight是不对的，因为 documentElement 是一个 iframe，但是您将在自己的项目中获得图片:)
回答by BENARD Patrick
CSS:
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
回答by Jobrocol
What worked for me was adding a div around the content. Originally i had this. Css applied to the td had no effect.
对我有用的是在内容周围添加一个 div。原来我有这个。应用于 td 的 CSS 没有效果。
<td>
@Html.DisplayFor(modelItem => item.Message)
</td>
Then I wrapped the content in a div and the css worked as expected
然后我将内容包装在一个 div 中，css 按预期工作
<td>
<div class="largeContent">
@Html.DisplayFor(modelItem => item.Message)
</div>
</td>
回答by isherwood
http://jsfiddle.net/isherwood/gfgux
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 ">
回答by Gayan Kavirathne
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 包裹表格并更改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>[email protected]</td>
</tr>
<tr>
<td>Respiratory Effort</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Oxygon Saturation</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>Try changing the value as it fits for you.
尝试更改适合您的值。
