Hallo zusammen,
ich habe aktuell ein Problem mit meiner CSS-gestylten Tabelle:
Eigentlich dachte ich, ich hätte die Zellenbreite ordnungsgemäß begrenzt (in Testumgebungen funktionierte es auch), sobald ich den Code aber bei mit in den Shop hochlade mit der zugehörigen CSS-Gestaltung, klappt es leider nicht mehr und meine eigentlich auf 35% Breite begrenzten Zellen werden munter verlängert, sobald sich zu langer Inhalt darin befindet.
Gedacht ist aber natürlich eigentlich, dass die Tabelle den Text dann automatisch umbricht und ihr eingestelltes ordentliches Raster behält.
Wie gesagt: Im Tryout-Editor klappt es auch (siehe Anhang), nur in der "echten" Anwendung wird meine Breitenbegrenzung dann gekonnt ignoriert...
Hat vielleicht irgendwer eine Idee wie ich das Problem lösen könnte?
Hier der CSS-Code:
/*
Formatierungen für die Produktbeschreibungs-Tabellen im D4W-Shop
*/
.descriptiontext{
font-size: 1em;
padding: 1em;
text-align: justify;
}
.descriptiontable{
padding: 1em;
padding-top: 0em;
/* table-layout: fixed;*/
}
th{
background-color: rgba(0,0,0,0.1);
font-size: 1em;
padding: 0.5em;
text-align: left;
font-style: italic;
width: 15%;
max-width: 15%;
border-style: dotted;
border-width: 1px;
}
td{
font-size: 1em;
padding: 0.5em;
text-align: left;
width: 35%;
max-width: 35%;
border-style: dotted;
border-width: 1px;
}
@media screen and (max-width:700px){
tr{float: left; width: 100%; max-width: 100%;}
th{float: left; width: 100%; max-width: 100%;}
td{float: left; width: 100%; max-width: 100%;}
}
.redlabel th{
background-color: #e2dac7;
border-width: 0;
}
.redlabel td{
border-width: 0;
}
Alles anzeigen
Und der HTML-Code der Tabelle:
<p class="descriptiontext">
{ART_FF.FELD1}
</p>
<table class="descriptiontable" width=100%>
<tr>
<th>Oberfläche:</th>
<td>{ART_FF.FELD2}</td>
<th>Farbe:</th>
<td>{ART_FF.FELD3}</td>
</tr>
<tr>
<th>Materialstärke:</th>
<td>{ART_FF.FELD5}</td>
<th>Rohstoffe:</th>
<td>{ART_FF.FELD6}</td>
</tr>
<tr>
<th>Herstellung:</th>
<td>{ART_FF.FELD7}</td>
<th>Lieferumfang:</th>
<td>{ART_FF.FELD4}</td>
</tr>
</table>
<table class="descriptiontable" width=100%>
<tr>
<th>Anwendbar auf:</th>
<td>{ART_FF.FELD9}</td>
<th>Pflege:</th>
<td>{ART_FF.FELD8}</td>
</tr>
<tr>
<th>Montage:</th>
<td>{ART_FF.FELD10}</td>
<th>Werkzeuge:</th>
<td>{ART_FF.FELD11}</td>
</tr>
</table>
<table class="descriptiontable redlabel" width=100%>
<tr>
<th>Handwerker-Level:</th>
<td>{ART_FF.FELD12}</td>
<th>Ökobilanz:</th>
<td>{ART_FF.FELD13}
</td>
</tr>
</table>
Alles anzeigen
Die Feldvariablen in der Tabelle werden bei uns aus der Warenwirtschaft automatisch mit Inhalten befüllt.
Eine Zelle habe ich mal hier im Beispiel mit Blindtext gefüllt, damit man das Problem evtl. einfacher nachvollziehen kann.
Ich danke Euch für Ideen! =)
Besten Gruß,
Sebastian