Poremecena scroll tabela

Poremecena scroll tabela 16.05.2014. u 07:48 · pre 151 meseci #1

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...

Re: Poremecena scroll tabela 16.05.2014. u 08:05 · pre 151 meseci #2

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 :)

Potpis

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

Re: Poremecena scroll tabela 16.05.2014. u 08:24 · pre 151 meseci #3

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

Re: Poremecena scroll tabela 16.05.2014. u 09:57 · pre 151 meseci #4

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. :)

Potpis

http://www.behance.net/MiselTekinder

Re: Poremecena scroll tabela 16.05.2014. u 11:54 · pre 151 meseci #5

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

Re: Poremecena scroll tabela 16.05.2014. u 12:42 · pre 151 meseci #6

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.

Potpis

http://www.behance.net/MiselTekinder

Re: Poremecena scroll tabela 16.05.2014. u 18:30 · pre 151 meseci #7

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

Re: Poremecena scroll tabela 16.05.2014. u 19:47 · pre 151 meseci #8

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))

Potpis

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

Re: Poremecena scroll tabela 21.05.2014. u 14:05 · pre 151 meseci #9

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.

Re: Poremecena scroll tabela 21.05.2014. u 16:08 · pre 151 meseci #10

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...

Re: Poremecena scroll tabela 21.05.2014. u 21:17 · pre 151 meseci #11

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

Re: Poremecena scroll tabela 22.05.2014. u 08:57 · pre 151 meseci #12

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

Re: Poremecena scroll tabela 22.05.2014. u 12:22 · pre 151 meseci #13

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...

Srodne teme