2017-12-26 25 views
1

Ich versuche, eine Tabelle zu erstellen, die in der Breite (ich weiß nicht, wie es funktioniert, wenn es auch dynamisch ist) mit vertikalen Bildlauf für große Datenmenge festgelegt wird.Wie kann der Benutzer die Höhe einer Tabelle dynamisch anpassen?

  1. Wie wird sich der Tisch schön verhalten, wenn Browser Fensterbreite durch den Benutzer reduziert oder: Das fand ich kann mit

    div { 
     
        width: 350px; 
     
        height: 110px; 
     
        border: thin solid black; 
     
        overflow-x: scroll; 
     
        overflow-y: scroll; 
     
    }
    <div><table style="width:100%"> 
     
        <tr> 
     
        <th>Firstname</th> 
     
        <th>Lastname</th> 
     
        <th>Age</th> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
        <tr> 
     
        <td>Jill</td> 
     
        <td>Smith</td> 
     
        <td>50</td> 
     
        </tr> 
     
    </table></div>

    Was ich zwei Dinge wollen getan werden sogar im großen Monitor erhöht?

  2. Wie kann div mit einer Anfangshöhe gemacht werden, aber dem Benutzer erlauben, die Höhe dynamisch zu erhöhen oder zu verringern, wenn er auf den unteren Rand klickt und ihn nach unten zieht oder nach oben bewegt. Und scroll sollte sich auch entsprechend anpassen. Bedeutet, wenn die Tabelle zum letzten Datensatz erweitert wird (oder eine feste maximale Höhe), Scroll sollte aufhören, und wenn Höhe verringert wird (brauchen Sie eine feste mögliche Min-Höhe), Scroll sollte zurückkommen.

ich diese in bin mit Reagieren Seite, also nicht Dinge komplex zu machen, ich will nur CSS Sachen, wenn möglich Bootstrap.

+0

Die @media Regel verwendet wird, um verschiedene Stilregeln für verschiedene Medientypen/Geräte Quelle zu definieren: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp –

+0

Nur für den Desktop. Kein mobiles Gerät. – xploreraj

+0

Es funktioniert für beide. –

Antwort

1

Das ist, was ich bisher habe, hoffe es hilft.

$('#resize').resizable({ 
 
    helper: "ui-resizable-helper", 
 
    grid: [10, 10] 
 
});
.ui-resizable-helper { 
 
    border: 1px dotted #999; 
 
} 
 

 
#resize { 
 
    background-color: #91d4ff; 
 
} 
 

 
.demodiv { 
 
    width: 350px; 
 
    height: 110px; 
 
    border: thin solid black; 
 
    overflow-x: scroll; 
 
    overflow-y: scroll; 
 
} 
 

 
.demodiv { 
 
    height: 250px; 
 
    width: 100%; 
 
    float: left; 
 
    margin-left: 5px; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 
<div id="resize" class="demodiv"> 
 
    <div class="aa"> 
 
    <table style="width:100%"> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Age</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

+0

Hilft. Aber kann es nicht mit einfachen Bootstrap CSS nur ohne Jquery getan werden? Ich schreibe alles innerhalb von Funktionen und keinen Platz, um js getrennt zu schreiben. Es kommen alle Komponenten in meine React-Website. – xploreraj

Verwandte Themen