ana*_*nam 17 html css twitter-bootstrap
我正在使用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>
dav*_*rad 22
对于<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);
以上所有这些小提琴 - > http://jsfiddle.net/LZuJt/
注意:我不在乎你的25%身高#description和100%桌子上的身高.猜猜这只是一个例子.并注意这clientHeight是不正确的,因为documentElement是一个iframe,但你会得到你自己的projekt图片:)
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
对我有用的简单解决方案如下，用 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>尝试更改适合您的值。
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 ">