Verrätst Du uns auch was Du auf w3schools gefunden hast?
IMO ist die Entscheidung "Tabelle oder nicht" unabhängig davon ob sie sich in einem Modal oder direkt in der Seite befindet. Warum meinst Du denn, dass dein Werk misslungen ist? Vermutlich weil die einzelnen Zellen direkt aneinander hängen so dass man nicht erkennt, was wozu gehört? Das liegt aber am Styling und mit ein wenig Rändern oder Padding oder Margin kann man das sicher wesentlich verbessern.
Unabhängig davon hat ein Gridlayout aber gewisse Vorteile, ich glaube, ich habe schon Mal darauf hin gewiesen.
Ich habe mal deine Tabelle umgestellt:
<div class="modal-body">
<div class="grid-container">
<div class="nr">Nr. 1</div>
<div class="name">Michael Schlegel</div>
<div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen
Im allgemeinen Sprachgebrauch haben sich die Begriffe Angler oder Angelfischer durchgesetzt
</div>
<div class="phone">08154711</div>
<div class="nr">Nr. 22</div>
<div class="name">Franz Kowalsky</div>
<div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div>
<div class="phone">08154711</div>
<div class="nr">Nr. 333</div>
<div class="name">Klaus-Dieter Germann</div>
<div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div>
<div class="phone">08154711</div>
</div>
</div>
Alles anzeigen
Und mit diesem CSS kannst Du die Elemente vierspaltig anordnen:
.grid-container {
display: grid;
/* 4 Spalten mit dem gewünschten Verhältnis
der Breite anlegen */
grid-template-columns: 1fr 3fr 8fr 3fr;
/* Damit es übersichtliche wird, einen kleinen
Zwischenraum zwischen den Zellen erzeugen */
gap: 1em;
}
/* Bei schmalem Browserfenster auf einspaltige
Anordnung umschalten */
@media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Alles anzeigen
Du siehst, es wird dadurch sehr kompakt. Auch auf die Klassen könntest Du verzichten wenn Du nth-of-type verwenden würdest. Allerdings ist es mit Klassen ein wenig klarer, was gestylt wird.