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?
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?
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.
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 –
Nur für den Desktop. Kein mobiles Gerät. – xploreraj
Es funktioniert für beide. –