Welcome, Guest
Username: Password: Remember me
Bitte posten sie hier in deutscher Sprache! Und vergessen sie nicht anzugeben, um welches Template und welche Joomla Version es sich bei ihrer Frage handelt.

TOPIC: CSS für eine Tabelle / jp-power

CSS für eine Tabelle / jp-power 1 week 9 hours ago #1

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</a></td>
<td><a href="http://xxxx/">xxxx</a></td>
<td><a href="http://xxxxx">xxxx</a></td>
</tr>
<tr>
<td><a href="https:xxx">xxxx</a></td>
<td><a href="xxx">xxxx</a></td>
<td><a href="http://xxxx/">xxxx</a></td>
</tr>
</tbody>
</table>
############################

Kan mir da jemand weiterhelfen?

Ist evtl. eine komplett andere Lösung besser?
The administrator has disabled public write access.

CSS für eine Tabelle / jp-power 1 week 5 hours ago #2

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>
The administrator has disabled public write access.
The following user(s) said Thank You: joomlaplates

CSS für eine Tabelle / jp-power 1 week 3 hours ago #3

Responsive Tabellen können sie auch mit dem UIKIT machen;
getuikit.com/v2/docs/table.html
The administrator has disabled public write access.
The following user(s) said Thank You: mcam

CSS für eine Tabelle / jp-power 1 week 10 minutes ago #4

Danke
The administrator has disabled public write access.
Moderators: joomlaplates