ブートストラップでテーブルと行の高さを与える

私はブートストラップ3を使用しています。テーブルと行に高さを与えようとしていますが、何も私のために働いていません。ブートストラップでテーブルと行の高さを与える

私はテーブルの行の高さと他のプロパティを設定しようとしましたが、どうすれば高さを上げることができますか？ <tr>年代については

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

出典

2013-12-16 anam

あなたは受け入れるべき答え。 – gsamaras

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

出典

2013-12-16 14:30:43 isherwood

ちょうどそれはまた、ブートストラップで動作

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

を設定します。 100%の高さの場合、100%はの何かの100％である必要があります。したがって、コンテナの1つ、または本体の固定高さを定義する必要があります。私は（たとえば）、あなたはページ全体を100％にしたいと思います：

body { 
    height: 700px; 
} 
.table100, .row, .container, .table-responsive, .table-bordered { 
    height: 100%; 
}

静的高さを設定しない問題を回避するには、ビューポートに応じてコードに高さを強制することである：

$('body').height(document.documentElement.clientHeight);

上記のすべてで、このフィドル - >http://jsfiddle.net/LZuJt/

注：私は#descriptionにあなたが25%高さを持っていることを気にしません、テーブル上の高さは100%です。それはほんの一例だと思います。そして、clientHeightはdocumentElementがiframeなので正しくないことに気付きますが、あなた自身のプロジェクトで画像を取得できます:)

出典

2013-12-16 14:47:41 davidkonrad

jsを使用してボディの高さを設定する代わりに、100vhを使用できます（vh-\tビューポートの高さの1％に対して：https://www.w3schools.com/cssref/css_units.asp） –

私の仕事は、コンテンツの周りにdivを追加することでした。元々私はこれを持っていました。 tdに適用されたCSSは効果がありませんでした。

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

は、その後、私はdiv要素のコンテンツを包み、CSSが期待

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

出典

2014-02-21 16:41:47 Jobrocol

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

出典

2014-05-07 13:24:51 pbenard

ブートストラップでテーブルと行の高さを与える

答えて

関連する問題