dando altezza al tavolo e fila nel bootstrap

Sto usando bootstrap 3, sto cercando di dare altezza al tavolo e fila ma nulla sta funzionando per me.dando altezza al tavolo e fila nel bootstrap

ho provato a impostare l'altezza della linea e altre proprietà della tabella, come posso aumentare l'altezza ??

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

fonte

2013-12-16 anam

Si dovrebbe accettare una domanda. – 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 ">

fonte

2013-12-16 14:30:43 isherwood

per la 's <tr> appena impostato

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

Funziona con bootstrap anche. Per l'altezza 100%, il valore 100% deve essere 100% di qualcosa di. Pertanto, è necessario definire un'altezza fissa per uno dei contenitori o il corpo. Credo che si desidera che l'intera pagina per essere al 100%, in modo (esempio):

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

Una soluzione per non impostare un altezza statica è forzando l'altezza in codice secondo la finestra:

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

tutto quanto sopra in questo violino ->http://jsfiddle.net/LZuJt/

Nota: non mi importa di avere 25% altezza su #description, e 100% altezza sul tavolo. Indovina, è solo un esempio. E notare che clientHeight non è corretto poiché documentElement è un iframe, ma si otterrà l'immagine nel proprio progetto :)

fonte

2013-12-16 14:47:41 davidkonrad

Invece di utilizzare js per impostare l'altezza del corpo, è possibile utilizzare 100vh (vh - \t relativo all'1% dell'altezza del viewport: https://www.w3schools.com/cssref/css_units.asp) –

Ciò che ha funzionato per me è stato aggiungere un div al contenuto. Inizialmente avevo questo. Il css applicato al td non ha avuto alcun effetto.

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

Poi ho avvolto il contenuto in un div e css funzionato come previsto

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

fonte

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

fonte

2014-05-07 13:24:51 pbenard

dando altezza al tavolo e fila nel bootstrap

risposta

Problemi correlati