html, css: Höhe der Tabelle an die Anzahl der Zeilen anpassen

-1

<div class="modal-body"> 
       <div class="table-responsive"> 
       <table id="table"> 
        <thead> 
        <tr> 
         <th>...</th> 
          ... 
        </tr> 
        <thead> 

        <tbody> 
        <tr> 
         <td>...</td> 
          ... 
        </tr> 
        <thead> 
       </table> 
       </div> 
     </div>

Ich möchte die Höhe der Tabelle abhängig von der Anzahl der Zeilen anpassen. Ich möchte die Höhe mit einer Nummer (N px) begrenzen, aber wenn es weniger Zeilen gibt (die weniger als N px füllen), sollte die Tabelle niedriger sein. Ich habe versucht, die maximale Höhe einzustellen, aber ohne Erfolg (Box war dann leer).html, css: Höhe der Tabelle an die Anzahl der Zeilen anpassen

Edit: Ich habe versucht: fiddle

Quelle

2017-05-30 user6808217

Können Sie umfassen die CSS Sie versuchten die leere Box Ergebnis gab? – Adrian

Ich habe gerade versucht, Max-Höhe: 300px zu Table-Tag oder .Table-responsive-Klasse. Auch versucht, Höhe zu setzen, aber dann wurde es behoben – user6808217

Könnten Sie möglicherweise eine vollständige [Geige] (https://jsfiddle.net/) oder ähnliches einschließlich der HTML-und CSS, die nicht funktionieren? Die Einstellung der maximalen Höhe sollte das gewünschte Verhalten ergeben. – Adrian

Fügen Sie einfach die Höhe tr so die Tabelle durch tr multipled werden, auch geändert ich Ihre id="table" zu class="mytable" nur für das Beispiel zeigt.

tr { 
 
    height: 50px; 
 
} 
 

 
table *{ 
 
    border: 1px solid green; 
 
    box-sizing: border-box; 
 
} 
 

 
.table-responsive{ 
 
    display: inline-block; 
 
    max-height: 150px; 
 
    overflow: auto; 
 
}

<div class="modal-body"> 
 
    <div class="table-responsive"> 
 
    <table class="mytable"> 
 
     <thead> 
 
     <tr> 
 
      <th>tr here 111111</th> 
 
      <th>tr here 222222</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <th>tr here 22222</th> 
 
      <td>td here 22222</td> 
 
     </tr> 
 
     <tr> 
 
      <th>tr here 33333</th> 
 
      <td>td here 33333</td> 
 
     </tr> 
 
     <tr> 
 
      <th>tr here 44444</th> 
 
      <td>td here 44444</td> 
 
     </tr> 
 
      <tr> 
 
      <th>tr here 55555</th> 
 
      <td>td here 55555</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 

 
<hr> 
 

 
<div class="modal-body"> 
 
    <div class="table-responsive"> 
 
    <table class="mytable"> 
 
     <thead> 
 
     <tr> 
 
      <th>tr here 111111</th> 
 
      <th>tr here 222222</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <th>tr here 22222</th> 
 
      <td>td here 22222</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Quelle

2017-05-30 20:40:41

versuchen, mit den folgenden Code zu spielen,

table,td,th{ 
 
    border: 1px solid black; 
 
    width:200px; 
 
} 
 

 
thead,tbody{ 
 
    display:block; 
 
} 
 
    
 
tbody{ 
 
    \t max-height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Month</th> 
 
     <th>Savings</th> 
 
    </tr> 
 
    </thead> 
 
    
 
    <tbody> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2017-05-30 20:42:57

html, css: Höhe der Tabelle an die Anzahl der Zeilen anpassen

Antwort

Verwandte Themen