Poremecena scroll tabela

[ Thugzsr @ 16.05.2014. 07:48 ] @

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

[ Aleksandar Klickovic @ 16.05.2014. 08:05 ] @

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

[ Thugzsr @ 16.05.2014. 08:24 ] @

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

[ Zeberdee @ 16.05.2014. 09:57 ] @

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

[ Thugzsr @ 16.05.2014. 11:54 ] @

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

[ Zeberdee @ 16.05.2014. 12:42 ] @

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.

[ Thugzsr @ 16.05.2014. 18:30 ] @

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

[ Aleksandar Klickovic @ 16.05.2014. 19:47 ] @

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

[ Thugzsr @ 21.05.2014. 14:05 ] @

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.

[ valjan @ 21.05.2014. 16:08 ] @

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

[ electropioneer @ 21.05.2014. 21:17 ] @

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

[ Thugzsr @ 22.05.2014. 08:57 ] @

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

[ valjan @ 22.05.2014. 12:22 ] @

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