Responsive tables, the smart way

ya as your html is same you can change the styles for the css properties according to the media query a better solution would be-
fiddle

@media only screen and (min-width: 769px) {
       #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;
}
}
@media only screen and (max-width: 768px) {
#content {
    border:1px solid;
    border-collapse:collapse;
}
#content tr {
    height:4em; border-bottom:1px solid;
}
#content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
    height:4em;
}
#content td {
    padding:.07em .2em;
    white-space:nowrap;
    height:1.4em;
    display:inline;
}
#content td:not(:last-child)::after {
    display:block; content:'';
    height:0;
    border-bottom:1px solid;
}

}

one possible solution is to use media queries an hide the respective blocks
or change styles accordingly

here is a fiddle
changed smaller table id to content2

@media only screen and (max-width: 768px) {
    #content{
        display:none !important;
    }
}
@media only screen and (min-width: 769px) {
    #content2{
        display:none !important;
    }
}