tpl modified responsive - Tabelle in Produktbeschreibung

[cobetf]

ich habe jetzt alles um geschrieben und in der stylesheet eingefügt. Nun ist die Tabelle wieder nicht scrollbar. Ich bekomme noch ein Kind 

Was habe ich denn nun wieder nicht beachtet oder falsch gemacht?

Viele Grüße
Rico

Code: CSS  [Auswählen]

.table-scrollable table {
  width: 100%;
  overflow-y:auto ;
  margin: 0 0 1em;
  background-color: rgb(233 230 230);
  border-collapse: collapse;
 
  }
.table-scrollable table td {
     padding: 4px 4px;
  border: black 1px solid;
 
}  
.table-scrollable table ::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.table-scrollable table ::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

[Karl1]

Hallo Rico,
den Style "overflow-y:auto" muss man auf den Div-Container legen.

Code: CSS  [Auswählen]

.table-scrollable {
  overflow-y:auto ;
}
.table-scrollable table {
  width: 100%;
  margin: 0 0 1em;
  background-color: rgb(233 230 230);
  border-collapse: collapse;
}
.table-scrollable table td {
     padding: 4px 4px;
  border: black 1px solid;
  }  
.table-scrollable table ::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.table-scrollable table ::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

Gruß Karl

[cobetf]

Vielen Dank.
Ich glaub jetzt hats bei mir klick gemacht. 

lg
Rico

[Viol]

Ich habe für meine Versandkosten im Contentmanager eine Tabelle angelegt, die verhält sich responsiv ohne Scrollbalken.
Ich habe die schon solange, dass ich nicht mehr genau weiß, ob ich dazu zusätzliche CSS Angaben in der Stylesheet.css gemacht habe.
@ Karl
Du kennst meine Seite. Vielleicht kannst Du mal schauen.Es wäre ja evt. hilfreich, eine solche Tabelle allgemein zu verwenden.

[noRiddle (revilonetz)]

Tabellen sind bis zu einem gewissen Grad immer responsive, von Natur aus, insofern man den Tabellenzellen nicht fixe Breiten vorgibt.
Nur wenn der Bildschirm gemessen an der Menge der Tabellenzellen und deren Inhalt zu schmal wird, kommt das an seine Grenzen.
Ich kenne deine Seite ja eigtl. auch, vergesse es nur immer wieder, gib mir nochmal einen Tipp, ich schaue dann auch mal.

Gruß,
noRiddle

[Viol]

Hab Dir eine Mail geschrieben.

[noRiddle (revilonetz)]

Ach ja, mein Gedächtnis... Was wollten wir nochmal schauen ?
Spaß beiseite.
Es verhält sich wie ich gesagt habe. *EDIT* WIe gesagt ist eine Tabelle von Haus aus responsive bis zu einem gewissen Grad. *END_EDIT*
Deine Tabelle passt selbst auf kleine Handy-Bildschirme noch akzeptabel lesbar, weil sie lediglich drei Spalten hat, sieht allerdings auf z.B. 'nem alten iPhone 5, mit lediglich 320px Breite, auch nicht mehr schön aus.

Erstaunlich übrigens, daß sich die Tabelle über die volle zur Verfügung stehende Breite ausdehnt, denn jede Tabellenzelle hat eine "width:201px"-Inline-Angabe. Hab' ich nicht verstanden, aber auch nicht lange versucht herauszufinden.
Was du mindestens machen solltest, wenn du die ganzen Inline-Styles nicht entfernen möchtest, ist dies mittels CSS:
Im stylesheet.css steht dies

Code: CSS  [Auswählen]

table td {
  padding: 4px 0;
}

was bewirkt, daß die Texte links (und evtl. auch rechts) an den Zellen kleben.
Das sollte dann so etwas in der Art werden:

Code: CSS  [Auswählen]

table td {
  padding: 4px 4px;
}

Wir (awids und meine Wenigkeit, sowie vielleicht weitere die Lust haben (ich träume, ich weiß)) sind übrigens in
Content Versandkosteninformationen
dabei ein automatisches Erstellen der Versandkosten-Tabelle zu ermöglichen.
Allerdings gibt es Unzulänglichkeiten, wie du dort lesen kannst.
Mal sehen...

Gruß,
noRiddle

[Viol]

Danke für Deine Tipps.
Die Tabelle des TE hat allerdings auch nur 3 Spalten und da finde ich "meine" Versandkostetabelle besser dargestellt, als eine Tabelle zum Scrollen.

[noRiddle (revilonetz)]

Ja, drei Spalten hat auch der TE, zumindest seinem Screenshot nach zu urteilen, aber in der dritten Spalte stehen lange Texte, was bei dir nicht der Fall ist.
Der Browser versucht, wenn keine Breitenangaben gemacht wurden, die Zellen-Breiten gemessen am Inhalt anständig zu verteilen, was nicht immer gelingt.
Ein quer-scrollbare Tabelle ist kein Problem und user-freundlich. Besser alles gut lesen können als alle Texte gequetscht sehen mit hässlichen Zeilenumbrüchen wie

Code: [Auswählen]

ab
 25,--
Just my opinion.

Gruß,
noRiddle

[Karl1]

Hallo Zusammen,
auch ich bin der Meinung man sollte der Tabelle und dem Browser bis zu einem gewissen Maße Spielraum lassen - aber alles Geschmackssache.
Bei dir Viol überläßt man dem Browser die Zellbreite.

Bei Rico würde ich z.B. einen automatischen Zeilenumbruch und eine Mindestweite von 400px hinzufügen

Code: CSS  [Auswählen]

.table-scrollable {
        overflow-y:auto ;
}
.table-scrollable table {
        width: 100%;
        min-width: 400px;
        margin: 0 0 1em;
        background-color: rgb(233 230 230);
        border-collapse: collapse;
        -webkit-hyphens: auto;
        hyphens: auto;
}
.table-scrollable table td {
        padding: 4px 4px;
        border: black 1px solid;
}
.table-scrollable table ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
}

.table-scrollable table ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 3px solid #fff;
        background-color: rgba(0, 0, 0, .3);
}

Macht aber nur Sinn, wenn die feste Weite und veraltetes cellpadding aus dem <table>-Tag entfernt wird
<table style="width: 500px;" cellpadding="0">
und zwischen folgenden Angaben Leerzeichen gesetzt werden
P305 + P351 + P338
dann klappt es auch mit dem automatischem Umbruch.

Gruß Karl