JSFiddle - React, Tailwind, and code Playground

HTML

<table id="content">
    <tr>
        <th>Description 1</th>
        <td>Data anand</td>
        <td>Data shanka</td>
        <td>Data 1C</td>
    </tr>
    <tr>
        <th>Description 2</th>
        <td>Data shan</td>
        <td>Data 2anand</td>
        <td>Data 2C</td>
    </tr>
    <tr>
        <th>Description 3</th>
        <td>Data</td>
        <td>More data</td>
        <td>And more data</td>
    </tr>
</table>
<table id="content2">
    <tr>
        <th>Description 1</th>
        <td>Data 1A</td>
        <td>Data 1B</td>
        <td>Data 1C</td>
    </tr>
    <tr>
        <th>Description 2</th>
        <td>Data 2A</td>
        <td>Data 2B</td>
        <td>Data 2C</td>
    </tr>
    <tr>
        <th>Description 3</th>
        <td>Data</td>
        <td>More data</td>
        <td>And...<br/>more data</td>
    </tr>
</table>

CSS

@media only screen and (max-width: 768px) {
    #content{
        display:none !important;
    }
}
@media only screen and (min-width: 769px) {
    #content2{
        display:none !important;
    }
}
    #content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}




            #content2 {
    border:1px solid;
    border-collapse:collapse;
}
#content2 tr {
    height:4em; border-bottom:1px solid;
}
#content2 th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
    height:4em;
}
#content2 td {
    padding:.07em .2em;
    white-space:nowrap;
    height:1.4em;
    display:inline;
}
#content2 td:not(:last-child)::after {
    display:block; content:'';
    height:0;
    border-bottom:1px solid;
}