[es] - Poremecena scroll tabela

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

^{16.05.2014. u 07:48 - pre 120 meseci}

Pozdrav ljudi, imam problem sa scroll-om u tabeli. Evo primer.
Link
Kako da vratim taj scrollbar u levo? Da bude u sklopu tabele a ne ovako...

Odgovor na temu

Aleksandar Klickovic
Owner
Daedalus Outsourcing
Beograd

Član broj: 204183
Poruke: 344
*.dynamic.sbb.rs.

Sajt: petsq.me

+67 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 08:05 - pre 120 meseci}

Pa za početak što imaš dve tabele?
Jedna ti je dovoljna, koristi thead i tfoot (opciono) tagove

Code:

<table>
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
        </tr>
        
    </tbody>
</table>

Onda malo teorije http://css-tricks.com/complete-guide-table-element/

I na kraju malo gotovih rešenja spremnih za doradu http://www.csstablegenerator.com/css-table-design/0/all/

To bi bilo to za početak :)

Daedalus Outsourcing | Web Development | SEO | Instagram Followers - http://daedalus.co.rs

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 08:24 - pre 120 meseci}

@ Aleksandar Klickovic Koristio sam i thead i tbody, ali isti su mi rezultati bili...A nisam nasao resenje za moj problem u tvojim linkovima

Odgovor na temu

Zeberdee
Misel Tekinder
Freelance Web Designer/Front-End
Developer
Niš

Član broj: 177025
Poruke: 59

Sajt: www.behance.net/MiselTeki..

+4 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 09:57 - pre 120 meseci}

Skrol ti se nalazi na "inner_table" div elementu, zbog toga i jeste toliko napolje, tj na samoj ivici div elementa.
Problem je u sirini tabele u njemu.

Problem mozes da resis podesavanjem sirine na tabeli unutar "inner_table" elementa:

Code:

.wrap table {
width: 100%;
table-layout: fixed;
}

Umesto dosadasnjih 97%

Ovako
Ako sam te dobro razumeo. :)

http://www.behance.net/MiselTekinder

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 11:54 - pre 120 meseci}

Ok, to je jedan deo, ali sad nisu poravnate celije. Header se ne poklapa sa celijama ispod.

Odgovor na temu

Zeberdee
Misel Tekinder
Freelance Web Designer/Front-End
Developer
Niš

Član broj: 177025
Poruke: 59

Sajt: www.behance.net/MiselTeki..

+4 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 12:42 - pre 120 meseci}

Sve zavisi sta zelis da postignes, da li zelis da ti se samo kolone skroluju bez header dela tabele ili zelis da ti se cela tabela skroluje.
U svakom slucaju moras da se poigras sa width propertijem i prilagodis sirine kako zelis.
A ako zelis da se skroluje cela tabela, stavo overflow-y na kontejner koji drzi celu tabelu.

http://www.behance.net/MiselTekinder

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 18:30 - pre 120 meseci}

@Zeberdee Ne, ovako je ok sto se tice scrolla, samo bih hteo jos da poravnam celije sa headerom.

Odgovor na temu

Aleksandar Klickovic
Owner
Daedalus Outsourcing
Beograd

Član broj: 204183
Poruke: 344
*.dynamic.sbb.rs.

Sajt: petsq.me

+67 Profil

Re: Poremecena scroll tabela

^{16.05.2014. u 19:47 - pre 120 meseci}

I dalje mi nije jasno da li ti je neophodno da imaš baš dve različite tabele ili je dozvoljeno rešenje sa jednom?

Ovo ti je rešenje sa thead i malo jQuerija http://jsfiddle.net/hashem/CrSpu/555/
Imaš opciono da uključiš width na 100%, ako je potrebno.

A sa dve tabele, ne znam, možda da poslednja kolona ne bude u % nego fiksne širine (npr 50px), pa poslednja kolona u donjoj tabeli da bude (50 - 24px (ili već širina skrola ako ćeš ga stilizovati))

Daedalus Outsourcing | Web Development | SEO | Instagram Followers - http://daedalus.co.rs

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Poremecena scroll tabela

^{21.05.2014. u 14:05 - pre 120 meseci}

Ma ne mora da ima 2 tabele :) tako sam probao da uradim, da jednu fiksiram, druga da bude promenljiva. E sad, probao sam i sa vasim primerom, ali opet imam par pixela razlike izmedju head-a i body-a. A kada dodam sa jquery-jem, dobijem isti rezultat kao i pre vaseg primera.

Odgovor na temu

valjan
Janko Valencik
Software Deployer
Schneider Electric
Novi Sad

Član broj: 158605
Poruke: 3531
*.static.sbb.rs.

+553 Profil

Re: Poremecena scroll tabela

^{21.05.2014. u 16:08 - pre 120 meseci}

Svaki th ti ima padding 5px na sve četiri strane, osim poslednjeg koji ima po 5px samo gore i dole. Znači svaki th ti je za 10px širi od bilo kog td, i naravno da ne možeš da ih poravnaš, i naravno da će scroll bar da pobegne za 50px u stranu... A uzgred, nisi definisano ni širinu za .inner_table table, kao što su ti već savetovali...

Odgovor na temu

electropioneer

Član broj: 45208
Poruke: 78
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Poremecena scroll tabela

^{21.05.2014. u 21:17 - pre 120 meseci}

Mozda ovako nesto: http://datatables.net/examples/basic_init/scroll_y.html

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Poremecena scroll tabela

^{22.05.2014. u 08:57 - pre 120 meseci}

Evo, ovako sad izgleda, sve sam izmenjao, ne znam odakle vuce tu razliku.
Link

Odgovor na temu

valjan
Janko Valencik
Software Deployer
Schneider Electric
Novi Sad

Član broj: 158605
Poruke: 3531
*.static.sbb.rs.

+553 Profil

Re: Poremecena scroll tabela

^{22.05.2014. u 12:22 - pre 120 meseci}

Nisi nigde definisao širinu tabele, definisao si širinu thead-a ali ne i tbody-ja kao 100%. Fali ti table-layout:fixed u definicijama za samu tabelu, u protivnom je u "auto" režimu što znači da će prilagoditi širinu najdužem sadržaju koji ne može da se prelomi u dva reda, a ne širini kolone koju si ti zadao. I ima tu još par sitnica za popravku, nemam sad ni vremena da sve debagujem a probaj i sam nešto da naučiš o CSS-u...

Odgovor na temu