Menu
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>
600
To set the row height to a specific measurement, click a cell in the row that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Row Height box, and then specify the height you want. To use the ruler, select a cell in the table, and then drag the markers on the ruler.
Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.
The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.
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 :)
162
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
33
What worked for me was adding a div around the content. Originally i had this. Css applied to the td had no effect.
<td>
@Html.DisplayFor(modelItem => item.Message)
</td>
Then I wrapped the content in a div and the css worked as expected
<td>
<div class="largeContent">
@Html.DisplayFor(modelItem => item.Message)
</div>
</td>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
