1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

ROZWIĄZANE Dostosowanie tabeli do formatu RWD

Dyskusja w 'Sklep internetowy eSklep' rozpoczęta przez użytkownika RX_UA, 17 Kwiecień 2018.

  1. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    Witam,

    Do swojego sklepu wstawiłem na stronie głównej tabelę z podlinkowanymi zdjęciami do kategorii produktów. Całość ma zastępować "kategorie obrazkowe". Działa i jest OK ale... tabela ma stałą szerkość i Google wyrzuca mi info :Twoja strona nie będzie działać dobrze na urządzeniach mobilnych.
    Na tutejszym forum znalazlę kilka informacji jak można to obejść ale jako, że jestem "zielony" i to mój pierwszy sklep nie do końca wiem jak temat ugryźć.
    Pytanie brzmi: czy mam dokonywać jakiś zmian (coś dopisać) w samym module gdzie mam tabelę ( w edytorze) czy musze też dodać coś do CSS? Zakładam że tak, ale jaki kod?
    Będę wdzięczny jeśli ktoś się zmiłuje i pomoże :)
     
    RX_UA, 17 Kwiecień 2018
    #1
  2. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @RX_UA można zrobić to na 2 sposoby:
    1. całkowicie usunąć moduł dla urządzeń mobilnych
    2. dopasowywać dla poszczególnych rozmiarów ekranów
    Dla obu sposobów należy wykorzystać wpis w CSS
    Ad1.
    Kod:
    @media only screen and (min-width: rozmiar w px) and (max-width: rozmiar w px){
#box_custom1  {
 display:none;
}
}
    Ad 2.
    Kod:
    @media only screen and (min-width: rozmiar w px) and (max-width: rozmiar w px){
#box_custom1 table {

    width: 100%;
}
}
    Oczywiście wartości, należy dopasować.
     
    LukaszC, 18 Kwiecień 2018
    #2
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    nie polecam tak robić :)
    całą tabelę można w chwilę zrobić na stylach i wtedy dowolnie ją wyświetlać na dowolnej rozdzielczości.
    czas zwykłych tabel minął bezpowrotnie.
     
    TheL, 20 Kwiecień 2018
    #3
    RX_UA lubi to.
  4. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @RX_UA udało się dopasować Twoje rozwiązanie do RWD ?
     
    LukaszC, 23 Kwiecień 2018
    #4
  5. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
     
    RX_UA, 23 Kwiecień 2018
    #5
  6. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    Chyba za cienki na to jestem. Moja tableka (kopia z panelu zarządznia clik shop) to:
    <table style="height: 101px;" width="900">
    <tbody>
    <tr>
    <td style="width: 181px; vertical-align: bottom;"><a href="/ru_UA/c/%D0%A2%D0%BE%D1%87%D0%B5%D1%87%D0%BD%D1%8B%D0%B5-%D1%81%D1%82%D0%B5%D0%BA%D0%BB%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8/296"><img src="/public/assets//stieklodierzatieli.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%94%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8-%D1%81%D1%82%D0%B5%D0%BA%D0%BB%D0%B0/267"><img src="/public/assets//dzierzatieli%20stiekla.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A1%D1%82%D0%B5%D0%BA%D0%BB%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BF%D0%B5%D1%80%D0%B8%D0%BB%D0%B0/333"><img src="/public/assets//stiekliannyie%20pierila.png" alt="" width="300" height="300" /></a></td>
    </tr>
    <tr>
    <td style="width: 181px;"> <a href="/ru_UA/c/%D0%93%D0%BE%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B8-%D0%B4%D0%BB%D1%8F-%D0%BB%D0%B5%D1%81%D1%82%D0%BD%D0%B8%D1%86%2C-%D0%BF%D0%B5%D1%80%D0%B8%D0%BB-%D0%B8-%D0%BE%D0%B3%D1%80%D0%B0%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B9/434"><img src="/public/assets//stolbiki%20elementy%20balustrad_new.png" alt="" width="300" height="303" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A1%D1%82%D0%B5%D0%BA%D0%BB%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BA%D0%BE%D0%B7%D1%8B%D1%80%D1%8C%D0%BA%D0%B8-%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D1%81%D1%8B/433"><img src="/public/assets//stiekliannyie%20naviesy_new.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/K%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D0%BF%D0%B0%D0%B9%D0%B4%D0%B5%D1%80/439"><img src="/public/assets//krieplienie%20spider.png" alt="" width="300" height="300" /></a></td>
    </tr>
    <tr>
    <td style="width: 181px;"> <a href="/ru_UA/c/P%D0%B8%D0%B3%D0%B5%D0%BB%D0%B5%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8-%D0%94%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8-%D0%BF%D1%80%D1%83%D1%82%D0%B0-%D0%BA-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B5/427"><img src="/public/assets//rigieledierzatieli.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A8%D0%B0%D1%80%D1%8B/293"><img src="/public/assets//szary.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%97%D0%B0%D0%B3%D0%BB%D1%83%D1%88%D0%BA%D0%B8/283"><img src="/public/assets//zagluszki.png" alt="" width="300" height="300" /></a></td>
    </tr>
    <tr>
    <td style="width: 181px;"> <a href="/ru_UA/c/%D0%9A%D0%BE%D0%BB%D0%B5%D0%BD%D0%B0%2C-%D1%81%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D0%B8/288"><img src="/public/assets//koliena%20soidienitieli.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9A%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D0%BE%D1%80%D1%83%D1%87%D0%BD%D1%8F/386"><img src="/public/assets//krieplienie%20porucia.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9E%D0%BF%D0%BE%D1%80%D0%B0-%D0%BF%D0%BE%D1%80%D1%83%D1%87%D0%BD%D1%8F/291"><img src="/public/assets//opora%20porucia.png" alt="" width="300" height="300" /></a></td>
    </tr>
    <tr>
    <td style="width: 181px;"> <a href="/ru_UA/c/%D0%9D%D0%B8%D0%B7-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B8-%D1%88%D0%B0%D0%B9%D0%B1%D0%B0/277"><img src="/public/assets//niz%20stoiki%20szajba.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%B0-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B8%2C-%D0%BA%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D1%82%D0%BEe%D0%BA%2C-%D0%BF%D0%B5%D1%80%D0%B8%D0%BB/364"><img src="/public/assets//osnova%20stoiki.png" alt="" width="299" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A2%D1%80%D1%83%D0%B1%D1%8B-%D0%BD%D0%B5%D1%80%D0%B6%D0%B0%D0%B2%D0%B5%D1%8E%D1%89%D0%B8%D0%B5%2C-%D1%81%D1%82%D0%B5%D1%80%D0%B6%D0%BD%D0%B8%2C-%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D0%B8/325"><img src="/public/assets//truby%20nierzeiejusie%20profili.png" alt="" width="300" height="302" /></a></td>
    </tr>
    <tr>
    <td style="width: 181px;"> <a href="/ru_UA/c/%D0%94%D0%B5%D1%80%D0%B5%D0%B2%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BF%D0%BE%D1%80%D1%83%D1%87%D0%BD%D0%B8/299"><img src="/public/assets//drew%20poruci.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9A%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0/342"><img src="/public/assets//kabielnaja%20sistiema.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> <a href="/ru_UA/c/%D0%97%D0%B0%D0%BA%D0%BB%D1%91%D0%BF%D0%BE%D1%87%D0%BD%D1%8B%D0%B5-%D0%B3%D0%B0%D0%B9%D0%BA%D0%B8%2C-%D0%B1%D0%BE%D0%BB%D1%82%D1%8B%2C-%D0%B2%D0%B8%D0%BD%D1%82%D1%8B%2C-%D1%80%D0%B5%D0%B7%D1%8C%D0%B1%D0%BE%D0%B2%D1%8B%D0%B5-%D1%81%D1%82%D0%B5%D1%80%D0%B6%D0%BD%D0%B8/319"><img src="/public/assets//gajki%20bolty.png" alt="" width="300" height="301" /></a></td>
    </tr>
    <tr>
    <td style="width: 181px;"><a href="/ru_UA/c/%D0%A4%D0%B8%D1%82%D0%B8%D0%BD%D0%B3%D0%B8-%D0%B4%D0%BB%D1%8F-%D0%B4%D1%83%D1%88%D0%B5%D0%B2%D1%8B%D1%85-%D0%BA%D0%B0%D0%B1%D0%B8%D0%BD/414"><img src="/public/assets//dlia%20duszevych%20kabin.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"><a href="/ru_UA/c/%D0%9A%D0%BB%D0%B5%D0%B8%2C-%D0%B0%D0%BD%D0%BA%D0%B5%D1%80%D1%8B%2C-%D1%85%D0%B8%D0%BC%D0%B8%D1%8F/318"><img src="/public/assets//kleje%20kotwy.png" alt="" width="300" height="300" /></a></td>
    <td style="width: 182px;"> </td>
    </tr>
    </tbody>
    </table>
    <p> </p>

    I szczerze mówiąc nie wiem gdzie powstawiać te polecenia Div itd. I jak dalej przejść do własnych stylów. Sukam w necie, czytam, ale większość porad i komentarzy jest chyba dla osób bardziej zaawansowanych ode mnie. NIestety, brak edukacji nie procentuje..
     
    RX_UA, 23 Kwiecień 2018
    #6
  7. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    Pojechałem na Ukrainę i zaprzyjżniony informatyk mi to zrobił "od ręki". Ale dziękuję wszystkim którzy odpowiedzieli na mój post. Dobrze jest wiedzieć że są jeszcze ludzie którzy chętnie pomagają.
     
    RX_UA, 25 Kwiecień 2018
    #7
  8. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @RX_UA w takim wypadku ustawiam status rozwiązany.
     
    LukaszC, 26 Kwiecień 2018
    #8
  9. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    OK.
     
    RX_UA, 26 Kwiecień 2018
    #9
  10. jakubbereta

    jakubbereta Nowy użytkownik

    Wiadomości:
    4
    Docenione treści:
    1
    A co w przypadku tabeli takiej jak na stronie https://watercheck.com/pages/product-selection-guide ? O ile samą tabelę stworzyłem bez problemu, o tyle pojawiają się dwa problemy.

    1 - jak obrócić tekst o 90 stopni zachowując odpowiednie przeskalowanie komórki?
    2- jak wykonać takie skalowanie dla wersji mobilnej, które dopasuje całą tabelkę do strony a nie będzie tworzył żadnego bootstrapa? Z racji że większość tabeli jest zbudowana z "X", nie ma sensu jej przesuwanie.

    Najprostszym rozwiązaniem było wstawienie tabelki w formie graficznej, wtedy sama się ładnie skalowała, ale chcę podlinkować poszczególne porównywane produkty analogicznie jak na stronie w.w. i się zrobił dla mnie spory problem.

    Walczę z tym już drugi dzień, testowałem już wszelakie tabele responsywne i zawszę w którymś momencie utknę. Spodziewam się że dla bardziej doświadczonej osoby to rozwiązanie jest banalnie proste.

    Adres mojego sklepu to https://aqlab.pl/pl/i/Porownanie-produktow/21

    mobilne.jpg strona.JPG
     
    jakubbereta, 28 Styczeń 2019
    #10
  11. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @jakubbereta tekst o 90 stopni obrócisz w css używając dyrektyw poniżej:

    Kod:
    /* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    W przypadku responsywności, należy ustawić ją procentowo tak jak przedstawiłem w jednym z powyższych wpisów.
     
    LukaszC, 28 Styczeń 2019
    #11
  12. jakubbereta

    jakubbereta Nowy użytkownik

    Wiadomości:
    4
    Docenione treści:
    1
    Zadanie rozwiązane. Do wglądu:
    https://aqlab.pl/pl/i/Porownanie-produktow/21

    Gdyby ktoś był zainteresowany taką tabelką to wrzucam gotowca z mojej strony:

    HTML:
    HTML:
    <center>
<div class="ps_table-box">
<div class="ps-labels">
<div class="ps-labels-spacer"> </div>
<div class="ps-label-box">
<div class="ps-label">Badania bakteriologiczne</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Legionella</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Metale ciężkie</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Wskaźniki organoleptyczne</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Substancje nieorganiczne</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Chlor</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Uboczne produkty dezynfekcji</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Azotany/Azotyny</div>
</div>
<div class="ps-label-box">
<div class="ps-label">Fluorki</div>
</div>
</div>
<div class="ps-title-box">
<div class="ps-labels-spacer-long">
<div class="ps-sep-title">Ujęcia prywatne (studnie)</div>
</div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Kombi/74">Kombi</a></div>
</div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Standard/75">Standard</a></div>
</div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Podstawowy/76">Podstawowy</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Mikrobiologia/77">Mikrobiologia</a></div>
</div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Azotanyazotyny/78">Azotany/Azotyny</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Fluorki/79">Fluorki</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Metale-ciezkie/80">Metale ciężkie</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Metale-ciezkie-w-instalacji-wewnetrznej/81">Metale ciężkie w instalacji wewnętrznej</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-title-box">
<div class="ps-labels-spacer-long">
<div class="ps-sep-title">Ujęcia komunalne</div>
</div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Kombi/82">Kombi</a></div>
</div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Standard/83">Standard</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Podstawowy/84">Podstawowy</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Mikrobiologia/85">Mikrobiologia</a></div>
</div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Fluorki/86">Fluorki</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Metale-ciezkie-w-instalacji-wewnetrznej/87">Metale ciężkie w instalacji wewnętrznej</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
<div class="ps-title-box">
<div class="ps-labels-spacer-long">
<div class="ps-sep-title">Woda ciepła</div>
</div>
</div>
<div class="ps-table-row">
<div class="ps-labels-spacer">
<div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Legionella/88">Legionella</a></div>
</div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
<div class="ps-check-box"> </div>
</div>
</div>
</center>
    CSS:
    Kod:
    .ps_table-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 50px;
  padding-bottom: 100px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.ps-labels {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  height: 290px;
  min-width: 750px;
  text-align: left;
}

.ps-labels-spacer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 28%;
  padding-right: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  border-right: 1px solid #04445F;
  font-family: Oswald, sans-serif;
  color: #04445F;
  font-size: 18px;
}
.psg-link{
  text-decoration: underline;
  color: #0000EE;
  text-align: right;
}

.ps-label-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 6%;
  padding-bottom: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-right: 1px solid #04445F;
  border-left: 0px solid #04445F;
  font-family: Oswald, sans-serif;
  font-weight: bold;
  font-size: 19px;
}

.ps-label {
  width: 290px;
  -webkit-transform: rotate(-90deg) translate(50%, 0px);
  -ms-transform: rotate(-90deg) translate(50%, 0px);
  transform: rotate(-90deg) translate(50%, 0px);
  color: #04445F;
}

.ps-table-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  height: 60px;
  min-width: 750px;
  border-bottom: 1px solid #04445F;
}

.ps-check-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 6%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-right: 1px solid #04445F;
  border-left: 0px solid #04445F;
}

.ps-test-title {
  text-align: right;
}

.ps-check-on {
  height: 30%;
}

.ps-title-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  height: 50px;
  min-width: 750px;
  background-color: #04445F;
}

.ps-sep-title {
  color: #f0f0f0;
  text-align: right;
}

.ps-labels-spacer-long {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 28%;
  padding-right: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  border-right: 1px solid #04445F;
  font-family: Oswald, sans-serif;
  color: #04445F;
  font-size: 18px;
}








@media (max-width: 991px) {
  .ps-labels {
    width: 95%;
    min-width: auto;
  }
  .ps-labels-spacer {
    font-size: 16px;
  }
  .ps-table-row {
    width: 95%;
    min-width: auto;
  }
  .ps-check-on {
    width: 50%;
    height: auto;
  }
  .ps-title-box {
    width: 95%;
    min-width: auto;
  }
  .ps-labels-spacer-long {
    font-size: 16px;
  }
 
 
@media (max-width: 767px) {
 
  .ps-labels {
    width: 95%;
    height: 200px;
  }
  .ps-labels-spacer {
    padding-right: 10px;
    font-size: 12px;
  }
  .ps-label {
    font-size: 12px;
  }
  .ps-table-row {
    width: 95%;
    height: 50px;
  }
  .ps-title-box {
    height: 32px;
  }
  .ps-labels-spacer-long {
    padding-right: 10px;
    font-size: 12px;
  }

 
@media (max-width: 479px) {
  .ps_table-box {
    padding-bottom: 35px;
  }
  .ps-labels {
    height: 180px;
  }
  .ps-labels-spacer {
    padding-right: 10px;
    padding-left: 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .ps-label {
    font-size: 10px;
  }
  .ps-table-row {
    height: 40px;
  }
  .ps-test-title {
    line-height: 16px;
    text-align: center;
  }
  .ps-title-box {
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .ps-sep-title {
    text-align: center;
  }
  .ps-labels-spacer-long {
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  }}}
     
    jakubbereta, 5 Luty 2019
    #12
    LukaszC lubi to.
  13. doohoo

    doohoo Bystrzak

    Wiadomości:
    65
    Docenione treści:
    1
    Co by należało zrobic zeby prostą tabelę RWD wstawić w opis produktu. Mniej więcej jak w kreatorze allegro się wrzuca.
    Przykład wierszami tabeli:
    Lewa strona opis - prawa zdjęcie
    Lewa zdjęcie - prawa opis
    Sam opis
    Samo zdjęcie
    itd
    Może coś prostego podpowiecie w html?

    Szkoda, że kreatora dobrego nie ma w sklepie.
     
    doohoo, 15 Kwiecień 2020
    #13

Poleć forum znajomym