HTML table furcsaság

Internet: PHP, CGI, stb.

Sziasztok!

Érdekes dologba botlottam egy egyszerűnek tűnő HTML táblázat gyakorló feladat során:

https://imgur.com/a/pEXVnGx

A képen jobb oldalt felül látható, hogy mit kellene kihozni, bal oldalt a kód, és jobb oldalt alul a kapott eredmény.

Több órán át néztem a kódot és próbálgattam különböző CSS beállításokat is, viszont semmi nem működött.

Ugyanezen táblázatot SharePoint Designer-el elkészítve ha egy 6x6-os táblával indulok és bővítem a szükséges cellákat, akkor sikerül elérnem a kívánt állapotot, csak a felesleges cellák lógnak ki, viszont ha azokat törlöm, akkor a képen látható eset áll fenn.

Windows-on IE és Chrome (plusz a SP Designer), Ubuntu alatt Firefox is ezt produkálja.

Kérlek segítsetek, mert már néhány napja idegesít ez a feladat, hogy én vagyok a hülye és elkerülte a figyelmemet valami, vagy másról van szó?

(Plusz poén, hogy 9.-es diákoknak órán adtam fel a feladatot, majd óra végére, mikor már én is megcsináltam a kódot, akkor láttam, hogy valami nem stimmel. Egyik diák hasonló módon programozta, mint ahogy én SP Designer-ben csináltam és ő is hasonlót tapasztalt, tehát a plusz cellákat meghagyva működik, de azokat törölve egyből az általam tapasztalt jön ki.)

Próbáltam neten keresni, de nem találtam releváns bejegyzéseket.

  • 1462 megtekintés

( uid_17626 | 2018. 10. 06., szo – 18:58 )

margin/padding?

Vagy mit szeretnél? Hogy legyenek egymás alatt?

( kilvadi | 2018. 10. 06., szo – 19:14 )

probald meg minden cellaban a relevans col es rowspan ertekeket is beirni. (ott is ahol 1-es)

( mauzi v | 2018. 10. 07., v – 00:01 )

Tanár úr kérem, itt a megoldásom, megvan az ötös? :)
https://jsfiddle.net/kw2xs9dj/

A látvány megtévesztő, de a dolog valójában jól működik :)

A probléma abban rejlik, hogy ha nem adsz meg a celláknak szélességet és magasságot, akkor akkorák lesznek, amekkorára a bennük lévő tartalom széttolja őket. Jelen esetben a 2. és 5. oszlopnak nincs értelmes szélessége, a 2. és 5. sornak pedig magassága, mert nincs ami széttolja őket - a bennük lévő tartalom ugyanis a cella-egyesítések miatt vígan átcsúszik a "szomszédos" cella területére. 


<style>
table {
  width: 100%;
  height: 200px;
  border: 2px solid black;
  border-collapse: collapse;
}

td {
  width: 16.6%;
  border: 2px solid black;
  vertical-align: top;
}

tr {
  height: 16.6%;
}
</style>

Windows 7-en Chrome 69.0.3497.100 (64bit) és IE 11 (11.0.9600.18952)

Másik gép:
Ubuntu 18.04-en 62.0.3 (64bit)

Windows esetén Notepad++-al szerkesztve, míg Ubuntu-n Visual Studio Code.

Akármilyen CSS beállítással próbálkozok, nem lesz jó. Méreteket állítottam, szegély vastagság, összevonás, margin, spacing, padding... semmi sem használt.

Tényleg nem értem mi lehet a probléma, főleg, hogy írtam a jsfiddle és a saját oldaladon is megfelelően működik, míg ha már átmásolom a teljes kódodat, akkor ismét elrontja.

Szerk:
Saját kód jsfiddle-ben megfelelő.

Közben odaadtam több osztálynak is ezt a problémát és ők is hiába csinálják meg vagy másolják le a kódot, nekik is rosszul jelenik meg a tábla.

Standard módot ír.

Közben fejlemény:

Másik teremben, egészen pontosan abban amelyikben először jelentkezett a probléma mauzi kolléga CSS kódját hozzárakva már rendesen jelenik meg.

Viszont akkor sem értem, hogy másik teremben és a saját gépemen miért jelenik meg ugyanezzel a kóddal rosszul.

Szerk.:

Ha a CSS fájlra hivatkozok, akkor jó. Ha style tag-be írom ugyanazt, akkor már baja van.

( fefy | 2018. 10. 08., h – 08:20 )

Első körben szerintem zárd ki a böngésző hibát:

<tr>
  <td colspan="2">r1c1</td>
  <td>r1c2</td>
</tr>
<tr>
  <td>r2c1</td>
</tr>

Ez egyáltalán jó megjelenést ad? (egy kétsoros cella mellett jobbról két darab 1 soros cella)

Vizsgára felkészülés végett keresek "kidobásra" szánt menedzselhető Cisco switch-eket és routereket, leginkább Pest és Bács-Kiskun megye területén.

Ha az általad írtat másolom, akkor kapok első sorba két cellát, majd az első cella alatt egy másik, ugyanakkora cellát.

Gondolom rowspan-t akartál írni. Úgy igen, van egy kétsoros cellám és mellette kettő sima cella.

Az eredeti feladat esetén amúgy, ha az első két sort megcsináltam, akkor az rendesen jelent meg, viszont amint bejött már a 3. sor 1 darab cellája, akkor már elrontotta a felosztást.