Emess: Bootstrap 4 Modal mit Tabelle Smartphoneansicht sehr bescheiden

Beitrag lesen

Ich habe ein Bootstrap 4 Template mit meinen bescheidenen Möglichkeiten bearbeiten und ein Problem mit der Tabelle im Modal

Das html

<!-- The Modal -->
                                <div class="modal fade" id="myModal">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">

  <!-- Modal Header -->

<div class="modal-header"> 
    <h4 class="modal-title">Biografie: Farid Ben Yahia</h4>
     <button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->
<div class="modal-body">

    <table class="table table-borderless">
        <tbody>
            <tr>
                <td>1951</td>
                <td>geboren in Gabès, Tunesien</td>
            </tr>
            <tr>
                <td>1965</td>
                <td>erste Ausstellung der Werke in Tunesien</td>
            </tr>
            <tr>
                <td>1972 – 1978</td>
                <td>Studium Politische Wirtschaftswissenschaften in Paris</td>
            </tr>
            <tr>
                <td>Seit 1975</td>
                <td>Regelmäßige nationale und internationale Ausstellungen seiner Werke. (Paris, Sens, Bordeaux, Cannes, Marseille, Florenz, Drammen, Oslo, Gabès, Sidi-Bou-Said, Tunis, und Bühl, Bischofsheim, Hamburg, Frankfurt, Rüsselsheim, Groß-Umstadt, Darmstadt, Duisburg, Köln, Bad-Honnef, Michelstadt, Seeheim-Jugenheim, Mainz, Rödermark, Wiesbaden, Zwickau und Reinheim).
                </td>
            </tr>
            <tr>
                <td>Technik:</td>
                <td>Sein Werk umfasst hauptsächlich Malerei auf Leinwand und Papier in
                    verschiedenen Techniken und Stilrichtungen, findet Ausdruck aber auch
                    in Serigraphien, Skulpturen und Keramiken.</td>
            </tr>
            <tr>
                <td>Themen:</td>
                <td>Farid Ben Yahia ist in seinem Hauptwerk ein ‚engagierter’ Künstler, der 
                    auf soziale, wirtschaftliche und zwischenmenschliche Themen 
                    aufmerksam macht.</td>
            </tr>
        </tbody>
    </table>
    <p></p>
    <tr>
        <td><b>Seine Bilder sind in verschiedenen Museen, in öffentlichen Gebäuden und bei internationalen Privatsammlern (Niederlande, Norwegen, Frankreich, Tunesien, Deutschland) zu finden.</b></td></tr>
    <p></p>
    <br>
                                            
   <!-- <div class="modal hr"></div> !-->
    <br>
    <h6>Ausstellungsdaten in chronologischer Reihenfolge:</h6>
    <table class="table table-borderless">
        <tbody>
        <tr>
            <td>2022</td>
            <td>März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst. <br> 
             <a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/</a></td>
        </tr>
        <tr>
            <td>2022</td>
            <td>Feb.-März: Kollektivausstellung anlässlich des internationalen Wettbewerbs - <br> 45. Kunstpreisausstellung der Sparkasse Karlsruhe (wegen COVID19 nur Online). <br>
            <a href="https://sparkassenstiftungen-ka.de/kulturstiftung/45-kunstpreis-2022/" target="_blank" title="">https://sparkassenstiftungen-ka.de/kulturstiftung/45-kunstpreis-2022/</a></td>
        </tr>
        <tr>
            <td>2021</td>
            <td>Nov/Dez.: Jahresausstellung der Mitglieder des BBK in der 'Paulskirche', Frankfurt</td>
        </tr>
        <tr>
             <td>2021</td>
            <td>Einzelausstellung in der 'Remisengalerie des Schlosses Philippsruh', Hanau –  <br>
                ausgefallen wegen COVID19</td>
        </tr>
        <tr>
            <td>2020</td>
            <td>Beteiligung im Online-Katalog des BBK Frankfurt- anstelle der wegen COVID19 ausgefallenen Jahresausstellung der Mitglieder des BBK in der 'Paulskirche'<br>
            <a href="http://katalog.bbk-frankfurt.de/portfolio/farid-ben-yahia/" target="_blank" title="">http://katalog.bbk-frankfurt.de/portfolio/farid-ben-yahia/</a></td>
        </tr>
        <tr>
            <td>2020</td>
            <td>Bunter Aufbruch – Online-Gemeinschaftsausstellung <br>
                verschoben (Kein bunter Aufbruch COVID19 in Sicht)</td>
        </tr>
        <tr>
            <td>2020</td>
            <td>April – Amnesty International- Ausstellung der Sektion Konstanz anlässlich ihres 50 jährigen Bestehens – <br> 
                ausgefallen wegen COVID19-Lockdown</td>
        </tr>

        <td></td>
        <td>- - - - - - - - <b>Ab MÄRZ 2020 - - - - - - - -COVID 19 LOCKDOWN </b>  - - - - - -</td>
        <tr>
            <td>2020</td>
            <td>Einzelausstellung (Retrospektive) in der 'Galerie des BBK-Frankfurt' <br> Titel: Schlagzeilen – Dokumente in Farbe (23 großformatige Ölbilder /Feb. 2020)</td>
        </tr>
        <tr>
            <td>2019</td>
            <td>Kollektivausstellung in der 'Galerie des BBK-Frankfurt' – ‚Die Neuen 2018‘ <br>
                Kollektivausstellung in der 'Galerie des BBK-Frankfurt' – ‚Zivilcourage‘<br> 
                Jahresausstellung der Mitglieder des BBK in der 'Paulskirche', Frankfurt</td>
        </tr>
        <tr>
            <td>2018</td>
            <td>Ausstellungsteilnahme anlässlich des internationalen Wettbewerbs - <br> 41. Kunstpreis der Sparkasse Karlsruhe, in         Karlsruhe<br>
                Aufnahme als Mitglied des BBK Frankfurt<br>
                Die Gestaltung des Covers des 1. Kunstbandes (Band 126) des ‚ev. Zentrums der Verkündigung der EKHN’ mit dem nach seinerm Entwurf gestaltetem Parament, Frankfurt</td>
        </tr>
        </tbody>
    </table>
</div>
</div>
                                                                   

 <!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Schließen</button>
     </div>
</div>
</div>


das css

/* Modal */

.modal-content {
    background-color: #989898;
    color: #fff;
}

.modal-header {
    background-color: midnightblue;
}



.modal-title {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

.modal td:first-child {
    white-space: nowrap;
    font-weight: bold;
}

.modal h6 {
    color: #fff; 
    margin-left: 10px;
    font-weight: bold;
}

.modal p {
    margin-left: 30px;
}
.modal hr {
    height: 1px;
    width: 90%;
    text-align: center;
    position: relative;
    background: #e6e6e6;
}

Ich bekomme die Tabelle einfach nicht richtig responsive hin .table-responive hat auch nichts gebracht.

Hilfe wüsste ich sehr zu schätzen.