在引导中给予桌子和行的高度 [英] giving height to table and row in bootstrap
问题描述
我尝试设置行高和其他属性。
我使用引导程序3，我试图给表和行的高度，但没有为我工作。如何增加身高？
< style>
div＃description {
background-color：gray;
身高：25％;
border：2px black;
}
tr {
line-height：25px;
}
.container {
height：100％
}
表{
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>你好< / 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-rightid =description>
< p> Hello2< / p>
< / div>
< / div>
< / div>
对于< tr> ; '刚刚设置
tr {
line -height：25px;
min-height：25px;
height：25px;
}
它也适用于bootstrap。对于 100％高度， 100％必须是 的100％。因此，您必须为其中一个容器或主体定义一个固定的高度。我猜你希望整个页面都是100％，所以（举例）：
$ b
body {
height：700px;
}
.table100，.row，.container，.table-responsive，.table-bordered {
height：100％;
}
不设置静态高度的解决方法是通过强制代码中的高度到视口：
$（'body'）。height（document.documentElement.clientHeight） ;
以上都在这个小提琴中 - > http://jsfiddle.net/LZuJt/
$ b
注意：I不要在乎你在 #description 和 100％< code>桌子上的高度。猜猜这只是一个例子。请注意， clientHeight 不正确，因为documentElement是一个iframe，但您可以在自己的项目中获得该图片：）
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>
For the <tr>'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 :)
这篇关于在引导中给予桌子和行的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
