Задание высоты таблицы и строки в бутстрапе

Ответ 1

Для <tr> просто установите

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

Он также работает с бутстрапом. Для высоты 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% height на таблице. Думаю, это всего лишь пример. И обратите внимание, что clientHeight не прав, поскольку documentElement является iframe, но вы получите изображение в своем собственном проекте:)

Ответ 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;
}

Bootply: http://www.bootply.com/AgI8LpDugl

Ответ 3

Что сработало для меня, так это добавить div вокруг контента. Первоначально у меня было это. Css, примененный к td, не имел эффекта.

        <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 строки, эта высота строки берется как отношение.

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