JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<h1 id="titel1"> Tabelle </h1>
    <table>
        <thead>
            <tr>
                <th scope="col"> Links</th>
                <th>Mitte</th>
                <th scope="col"> Rechts</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p class="TextLinks"></p></td>
                <td>M 2</td>
                <td><p class="TextRechts"></p></td>
            </tr>
            <tr>
                <td><p class="TextLinks"></p></td>
                <td>M 3</td>
                <td><p class="TextRechts"></p></td>
            </tr>
        </tbody>
    </table>
    <p> </p>
    <table>
        <thead>
            <tr>
                <th scope="col"> Links</th>
                <th>Mitte</th>
                <th scope="col"> Rechts</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Text Links</td>
                <td>M 2</td>
                <td>Text Rechts</td>
            </tr>
            <tr>
                <td>Text Links</td>
                <td>M 3</td>
                <td>Text Rechts</td>
            </tr>
        </tbody>
    </table>
    
    <button id="links" onclick="linksKlick()">Links</button>
    <button id="rechts" onclick="rechtsKlick()">Rechts</button>

CSS

th,td {
        color: DarkCyan;
}
tr {
       height: 10%;
}
td {
        width: 10%;
        height: 10%;
}
td p {margin:0}
table {
        position: relative;
        top: 50px;
        left: 360px;
        width: 50%;
        height: 5em;
        text-align: center;
        background-color: #efefef;
}

JavaScript

function linksKlick(){
        $(".TextLinks").text("Text links");
    }
    function rechtsKlick(){
        $(".TextRechts").text("Text rechts");
    }