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 year 1 week ago #1

  • mcam
  • mcam's Avatar
  • Offline
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 year 1 week ago #2

  • mcam
  • mcam's Avatar
  • Offline
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 year 1 week ago #3

  • joomlaplates
  • joomlaplates's Avatar
  • Online
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 year 1 week ago #4

  • mcam
  • mcam's Avatar
  • Offline
Danke
The administrator has disabled public write access.
Moderators: joomlaplates

Einzelnes Theme ( Download 1 Template)

Das sog. "Einzelne Theme" ist für alle Kunden geeignet die lediglich ein (1) Template benötigen, egal ob kommerziell oder privat genutzt. Sie dürfen das erworbene Template auf einer Joomla Installation produktiv nutzen.


Mitgliedschaft ( Download alle Templates)

Während ihrer Mitgliedschaft ist es ihnen erlaubt alle Templates herunter zu laden und unseren Bestimmungen entsprechend zu nutzen. Nach Ablauf der Mitgliedschaft dürfen sie natürlich alle bereits in Nutzung befindlichen Templates weiter einsetzen. Sie haben jedoch nach Ende ihrer Mitgliedschaft keinen Zugriff mehr auf den Download Bereich und keinen Zugriff mehr auf Updates.

Die Zahlung ist einmalig und ihr Membership läuft automatisch aus, sofern sie es nicht erneuern.

Unsere Mitgliedschaften bieten wir ausschließlich über JoomlaPlates.com an.

Jetzt kaufen