Autor Zpráva
lacek
Profil
zdravím Vás
prosím o pomoc s responzivitou tabulek
abych Vás uvedl do problému a popsal situaci

na pokusných stránkách www.mygastroexperiment.tode.cz (hosting endora) bojuji s responzivitou jídelníčků
mygastroexperiment.tode.cz/jidelnicky/trinec/hlavni-jidelna

responzivitu zkouším v mozzille >>pravé tlačítko>>prozkoumat prvek

o vykreslení tabulky se stará kód (php script) uložený v komponentě Jumi:
//cteni csv souboru
    $fh = fopen("CSV/HJ.csv","r") or die('err');
////////vykonna cast programu
        while(!feof($fh)) {
      $x = getcsv($fh,999999,';','n');
      if ($x) $bunka=$x;
                }
    fclose($fh);
    $oddata = explode ("-", $bunka[0]);
    $dodata = explode ("-", $bunka[1]);
    $kod = <<<HTMLKOD
<div class='retabJID'>
<table cellpadding='2' width='1300' style='table-layout: fixed; word-wrap: break-word' >
    <th colspan='7'>pro týden od $oddata[2].$oddata[1].$oddata[0] do $dodata[2].$dodata[1].$dodata[0]</th><tr class='tableFrame' bgcolor='#c8c8c8'>
    <td>DRUH JÍDLA<br>gramáž<br>zvýhodněná</td><td align='center'>PONDĚLÍ</td><td align='center'>ÚTERÝ</td><td align='center'>STŘEDA</td><td align='center'>ČTVRTEK</td><td align='center'>PÁTEK</td><td align='center'>1)SOBOTA<BR>2)NEDĚLE</td>
    </tr><tr class='jidel1row'>
    <td>POLÉVKY<BR>0,3 l</td><td>$bunka[9]<br><div class='textGreen'>$bunka[10]</div></td><td>$bunka[11]<br><div class='textGreen'>$bunka[12]</div></td><td>$bunka[13]<br><div class='textGreen'>$bunka[14]</div></td><td>$bunka[15]<br><div class='textGreen'>$bunka[16]</div></td><td>$bunka[17]<br><div class='textGreen'>$bunka[18]</div></td><td>$bunka[19]<BR>$bunka[20]</td>
    </tr><tr class='jidel2row'>
    <td>KLASICKÁ JÍDLA<BR>100 g</td><td>$bunka[21]<br><div class='textBlue'>$bunka[23]</div><br><div class='textPink'>$bunka[25]</div></td><td>$bunka[27]<br><div class='textBlue'>$bunka[29]</div><br><div class='textPink'>$bunka[31]</div></td><td>$bunka[33]<br><div class='textBlue'>$bunka[35]</div><br><div class='textPink'>$bunka[37]</div></td><td>$bunka[39]<br><div class='textBlue'>$bunka[41]</div><br><div class='textPink'>$bunka[43]</div></td><td>$bunka[45]<br><div class='textBlue'>$bunka[47]</div><br><div class='textPink'>$bunka[49]</div></td><td>$bunka[51]<BR>$bunka[52]</td>
    </tr><tr class='jidel1row'>
    <td>VÝBĚROVÁ JÍDLA<BR>120 g</td><td>$bunka[53]<br><div class='textBlue'>$bunka[55]</div><br><div class='textPink'>$bunka[57]</div></td><td>$bunka[59]<br><div class='textBlue'>$bunka[61]</div><br><div class='textPink'>$bunka[63]</div></td><td>$bunka[65]<br><div class='textBlue'>$bunka[67]</div><br><div class='textPink'>$bunka[69]</div></td><td>$bunka[71]<br><div class='textBlue'>$bunka[73]</div><br><div class='textPink'>$bunka[75]</div></td><td>$bunka[77]<br><div class='textBlue'>$bunka[79]</div><br><div class='textPink'>$bunka[81]</div></td><td>$bunka[83]<BR>$bunka[84]</td>
    </tr><tr class='jidel2row'>
    <td>SPECIALITA<BR>150 g</td><td>$bunka[85]</td><td>$bunka[87]</td><td>$bunka[89]</td><td>$bunka[91]</td><td>$bunka[93]</td><td></td>
    </tr><tr class='jidel1row'>
    <td>SPECIALITA II<BR>150 g</td><td><div class='textBlue'>$bunka[95]</div></td><td><div class='textBlue'>$bunka[97]</div></td><td><div class='textBlue'>$bunka[99]</div></td><td><div class='textBlue'>$bunka[101]</div></td><td><div class='textBlue'>$bunka[103]</div></td><td></td>
    </tr><tr class='jidel2row'>
   <td>DIETNÍ JÍDLO</td><td>$bunka[105]<br><div class='textBlue'>$bunka[106]</div></td><td>$bunka[108]<br><div class='textBlue'>$bunka[109]</div></td><td>$bunka[111]<br><div class='textBlue'>$bunka[112]</div></td><td>$bunka[114]<br><div class='textBlue'>$bunka[115]</div></td><td>$bunka[117]<br><div class='textBlue'>$bunka[118]</div></td><td></td>
    </tr><tr class='jidel1row'>
    
    <td>VEGETARIÁNSKÉ JÍDLO<BR>100 g<BR><img src="images/jidelnicky/VEG_30.png" alt="Bez masa" /></td><td>$bunka[120]</td><td>$bunka[121]</td><td>$bunka[122]</td><td>$bunka[123]</td><td>$bunka[124]</td><td></td>
    </tr><tr class='jidel2row'>
    <td>MOUČNÉ JÍDLO</td><td>$bunka[125]<br><div class='textBlue'>$bunka[127]</div></td><td>$bunka[129]<br><div class='textBlue'>$bunka[131]</div></td><td>$bunka[133]<br><div class='textBlue'>$bunka[135]</div></td><td>$bunka[137]<br><div class='textBlue'>$bunka[139]</div></td><td>$bunka[141]<br><div class='textBlue'>$bunka[143]</div></td><td></td>
    </tr><tr class='jidel1row'>
    <td>ZELENINOVÝ TALÍŘ</td><td>$bunka[145]</td><td>$bunka[147]</td><td>$bunka[149]</td><td>$bunka[151]</td><td>$bunka[153]</td><td></td>
    </tr><tr class='jidel2row'>
    <td>SALÁTY</td><td>$bunka[155]<br>$bunka[157]</td><td>$bunka[159]<br>$bunka[161]</td><td>$bunka[163]<br>$bunka[165]</td><td>$bunka[167]<br>$bunka[169]</td><td>$bunka[171]<br>$bunka[173]</td><td></td>
    </tr><tr class='jidel1row'>
    <td>KLASICKÉ JÍDLO<BR>2. SMĚNA<BR>100 g</td><td>$bunka[175]</td><td>$bunka[176]</td><td>$bunka[177]</td><td>$bunka[178]</td><td>$bunka[179]</td><td></td>
    </tr><tr class='jidel2row'>
    <td>VÝBĚROVÉ JÍDLO<BR>2. SMĚNA<BR>120 g</td><td>$bunka[180]</td><td>$bunka[181]</td><td>$bunka[182]</td><td>$bunka[183]</td><td>$bunka[184]</td><td></td>
    </tr><tr class='textBlackMini'>
    <td colspan='7'>Poznámky k jídelnímu lístku:&nbsp;$bunka[185]</td>
    </tr><tr class='textBlackMini'>
    <td colspan='7'>Vyhotovil:&nbsp;$bunka[187]</td>
    </tr><tr class='textBlackMini'>
    <td colspan='7'>Datum:&nbsp;$bunka[186]</td>
    </tr></table>
</div>


HTMLKOD;
      echo $kod; 

vytvořil jsem i styl:
/*uprava responzivity tabulek jidelnicku*/
.retabJID {
    max-width: 100%;
    
    overflow-x:visible;
}

a přídal <div class='retabJID'>

před tabulku

hledám zde na fóru a také jende

děkuji
Tomáš123
Profil
lacek:
Poučná debata. Zvyškom v mojom príspevku je myslený kód zo stránky odkázanej vyššie.
lacek
Profil
děkuji Tomáš123,
předešle jsem ho chybně zkoušel a nyní funguje:
viz. upravený kód
<table cellpadding='2' width='1300' style='table-layout: fixed; word-wrap: break-word; overflow-x: auto; max-width:100%' >

ale potřeboval bych poradit s písmem, poslal bych Vám screen ale badám jak obrázek zde vložit :)

prozatím děkuji




že by tak


ale myslím že by to i stačilo, ale jestli by jste něko měl nápad tak budu rád

děkuju
lacek
Profil
zdravím Vás, potřeboval bych pomoct ještě s tímto problémem, a to s prohlížečem opera a chrom
prosím o rady
viz posílám screeny:

chrom:

opera:

před tím to bylo z mozzily, (pro mě zatím nej prohlížeč)

děkuji
lacek
Profil
zdravíčko,
zkoušel jsem přidat display: block;

pomohlo to v tom smyslu, že v prohlížeči chrome a moozilla např. v zobrazení 360x640 se zobrazí horizontální scroll bar,

toto je úryvek kódu
<table cellpadding='2' width='1300' style='table-layout: fixed; word-wrap: break-word;  display: block; overflow-x: auto; max-width:100%' >

jsem z toho už zoufalý, v opeře to stále zlobí, operamini taktéž,
děkuji
Tomáš123
Profil
lacek:
Problémy ti spôsobuje overflow: hidden pre prvok div.tm-page deklarovaný v súbore gzip.php na riadku 228. Použi Ctrl+f. Na tom riadku je veľa pravidiel.

Ďalej vymaž max-width: 100% u tabuľky. Potom by to malo fungovať tak ako chceš.
lacek
Profil
děkuji za reakci,

myslím že to teď funguje i na opeře s horizontálním posuvníkem, můj problém byl ten, že jsem vše testoval na starých prohlížečích, opera, chrom na winXP. Teď si myslím že by to tak mohlo být, web: gastrosluzby.cz

moje poslední verze:

<table cellpadding='2' width='1300' style='table-layout: fixed; word-wrap: break-word; display: block; overflow-x: auto; max-width:100%' >

děkuji a zkusím pohledat soubor gzip.php a děkuji za email ale ten jsem si nechtíc vymazal
ať se Vám daří

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: