CSS für eine Tabelle / jp-power

Hallo, es geht um das template jp-power / Joomla Version ist 3.8.2.

ich habe eine Tabelle welche ich nicht responsive bekomme, bis zu einem gewissen Grad schon, auf Handys geht die tabelle dann "zur Seite raus"

ich habe in /jp-power/css/theme.css folgendes angepasst(ich weiß dass das in den Original css dateien nicht empfohlen ist)

/* Section Bottom B
========================================================================== */
#bottom-b {
background-color: rgba(51, 51, 51, 0.9);
}
#bottom-b table{
overflow-x:auto;
}
#bottom-b td {
padding: 15px;
}
#bottom-b a {
color: #d1d1d1;
}
#bottom-b,
#bottom-b h1,
#bottom-b h2,
#bottom-b h3,
#bottom-b h4,
#bottom-b h5,
#bottom-b h6 {
color: #ffffff; text-align: center;
==========================================================================

was aber keinen Erfolg hatte, das padding und die Farben werden genommen, vom "overflow-x:auto;" hatte ich erhofft es würde die tabelle respnsive machen, das funktioniert aber nur bis zu einer gewissen größe


der code zur Tabelle ist:
####################
<table align="center">
<tbody>
<tr>
<td><a href="http://xxxx/">xxxx
<td><a href="http://xxxx/">xxxx
<td><a href="http://xxxxx">xxxx
</tr>
<tr>
<td><a href="https:xxx">xxxx</a></td>
<td><a href="xxx">xxxx</a></td>
<td><a href="http://xxxx/">xxxx
</tr>
</tbody>
</table>
############################

Kan mir da jemand weiterhelfen?

Ist evtl. eine komplett andere Lösung besser?

Habe es so gelöst:

css:
######################
/* Section Bottom B
========================================================================== */
#bottom-b {
background-color: rgba(51, 51, 51, 0.9);
}
#bottom-b table{
width: 100%;
table-layout: fixed;
}
#bottom-b table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
#bottom-b th,
#bottom-b td {
padding: .625em;
text-align: center;
}
#bottom-b table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 500px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
display: block;
margin-bottom: .625em;
}
table td {
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
#bottom-b a {
color: #d1d1d1;
}
#bottom-b,
#bottom-b h1,
#bottom-b h2,
#bottom-b h3,
#bottom-b h4,
#bottom-b h5,
#bottom-b h6 {
color: #ffffff; text-align: center;
}
###################
html:
<table>
<caption>TabellenName</caption>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</tbody>
</table>

Responsive Tabellen können sie auch mit dem UIKIT machen;
getuikit.com/v2/docs/table.html

Danke