donner de la hauteur à la table et au rang dans le bootstrap

Je suis en utilisant bootstrap 3 , j'essaie de donner de la hauteur à la table et de la ligne mais rien ne fonctionne pour moi .

j'ai essayé de réglage de la hauteur de la ligne et d'autres propriétés de la table , comment puis-je augmenter la hauteur ??

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

source d'informationauteur anam

16

Pour la <tr>juste mis
```
tr {
   line-height: 25px;
   min-height: 25px;
   height: 25px;
}
```
Il fonctionne avec bootstrap aussi. Pour le 100% hauteur, 100% doit être de 100% de quelque chose. Par conséquent, vous devez définir une hauteur fixe pour l'un des récipients, ou le corps. Je suppose que vous voulez l'ensemble de la page à 100%, de sorte que (exemple) :
```
body {
    height: 700px;
}
.table100, .row, .container, .table-responsive, .table-bordered  {
    height: 100%;
}
```
Une solution de contournement ne pas définir une hauteur statique est en forçant la hauteur dans le code en fonction de la fenêtre d'affichage :
```
$('body').height(document.documentElement.clientHeight);
```
tous les ci-dessus en ce violon -> http://jsfiddle.net/LZuJt/

Note : je n'aime pas que vous avez 25% hauteur sur #descriptionet 100% hauteur sur la table. Suppose que c'est juste un exemple. Et remarquez que clientHeight n'est pas droite depuis la documentElement est une iframe, mais vous obtiendrez de l'image dans votre propre 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

Ce qui a fonctionné pour moi a été l'ajout d'un div autour du contenu.
A l'origine, j'avais cette. Css appliquée à la td a eu aucun effet.

        <td>           
             @Html.DisplayFor(modelItem => item.Message)           
        </td>

Puis j'ai enveloppé le contenu dans un div et du css a fonctionné comme prévu

       <td>
            <div class="largeContent">
                @Html.DisplayFor(modelItem => item.Message)
            </div>
        </td>

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

Vous devez vous connecter pour publier un commentaire.