Cod CSS eronat pentru table

Vezi subiectul anterior Vezi subiectul urmator In jos

Rezolvat Cod CSS eronat pentru table

Mesaj Scris de Ina la data de Mier 2 Mar - 12:20

Am in CSS un cod care imi apare ca eronat cind verific CSS-ul forumului.
Codul a fost initial asa:
Cod:
table{
border-spacing: 0px;
border-collapse: expression('separate', cellSpacing = '0px');}

Pe Hitskin s-a "transformat" in mod misterios si a devenit asa:
Cod:
table{
border-spacing: 0px;
border-collapse: expression(\'separate\', cellSpacing = \'0px\');}

Nici una din variante nu pare corecta, a doua fiind mai eronata decit prima.
Cum este corect?
Mersi!

Ina
Membru activ

feminin

Mesaje : 13733
Varsta : 45
Data de inscriere : 05/03/2009
Multumiri : 79
Niciun avertisment

http://www.goblenul.com

Sus In jos

Rezolvat Re: Cod CSS eronat pentru table

Mesaj Scris de Zeus la data de Mier 2 Mar - 14:27

Buna ziua,

Ambele coduri sunt eronate, atat varianta initiala cat si varianta "transformata".

Varianta corecta a codului este aceasta:
Cod:
table{
border-collapse:collapse;
border-spacing: 0px;
}

Proprietatea border-collapse are 3 optiuni, respectiv collapse, separate si initial, acestor optiuni nu li se pot atribui valori in pixeli ca in varianta eronata de mai sus. Pentru a seta o valoare in pixeli care sa defineasca distanta dintre tabel si coloane trebuie folosita proprietatea border-spacing, care functioneaza doar atunci cand proprietatea border-collapse este setata pe collapse.

O mica demonstratie a optiunilor border-collapse puteti gasi aici:
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

[Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Zeus
Administrator
Administrator

masculin

Mesaje : 3913
Localizare : Bucuresti, Romania
Data de inscriere : 19/02/2012
Multumiri : 599
Niciun avertisment

http://help.forumgratuit.ro

Sus In jos

Rezolvat Re: Cod CSS eronat pentru table

Mesaj Scris de Ina la data de Mier 2 Mar - 15:00

Codul de la tine este corect, mersi! Dar nu cred ca rezolva 100% problema mea.
Revenind la codul meu: care este rolul acelui cellSpacing? Din ce inteleg eu, s-a vrut ca borderul sa fie mai "adunat", de aici "collapse", dar in acelasi timp celulele tabelului sa nu fie unite, de aici "separate", iar "cellSpacing" defineste distanta dintre celule. Ca sa se poata distinge bine rindurile si coloanele chiar si la un tabel fara contur.
Este posibil ca aceasta bucatica de cod sa fi fost corelata cu un JavaScript, pe care bineinteles ca nu l-as fi putut gasi pe Hitskin? think Sau cu vreun template modificat?
As putea sa obtin efectul descris, sau ceva asemanator, prin alt cod CSS?

Ina
Membru activ

feminin

Mesaje : 13733
Varsta : 45
Data de inscriere : 05/03/2009
Multumiri : 79
Niciun avertisment

http://www.goblenul.com

Sus In jos

Rezolvat Re: Cod CSS eronat pentru table

Mesaj Scris de Zeus la data de Vin 4 Mar - 9:39

[Trebuie sa fiti inscris si conectat pentru a vedea acest link] este un atribut HTML (poate fi folosit si in BBCode) - acesta creeaza un spatiu in pixeli intre tabel si coloanele acestuia. Aceasta proprietate nu exista in CSS, dar efectul poate fi optinut folosind proprietatea border-collapse.

Pentru a crea sau scoate dinstanta dintre celule folositi acest cod CSS:
Cod:
.tabel, .tabel *{
border-collapse: initial !important;
border-spacing: 1px !important;
border: 1px solid black !important;
}

In editor adaugati:
Cod:
[table class="tabel"][tr][td]Coloana 1[/td]
[td]Coloana 2[/td]
[td]Coloana 3[/td]
[/tr]
[/table]

Rezultatul pe care il veti obtine va fi acesta:

Coloana 1Coloana 2Coloana 3


[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

[Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Zeus
Administrator
Administrator

masculin

Mesaje : 3913
Localizare : Bucuresti, Romania
Data de inscriere : 19/02/2012
Multumiri : 599
Niciun avertisment

http://help.forumgratuit.ro

Sus In jos

Rezolvat Re: Cod CSS eronat pentru table

Mesaj Scris de Ina la data de Vin 4 Mar - 19:55

Pina la urma, primul cod nu modifica aspectul conturului tabelului in functie de broder-spacing, tocmai pentru ca border-spacing nu functioneaza impreuna cu collapse.
Al doilea cod pe care mi-l oferi necesita ca utilizatorii forumului (creatorii de tabele in postari) sa aiba notiuni mai sofisticate.
Asa ca, pina la urma, am ales alta varianta
Cod:
table{
border-spacing: 1px;
border-collapse: separate;
border: 1px solid #8A138A}

td {padding: 3px;}
Va fi un tabel cu linii duble, unde: "border-spacing" determina distanta intre linii, "border-collapse: separate" arata ca tabelul are linii duble, iar prin "border" am ales o grosime si o culoare pentru linia de contur exterior a tabelului.
Pentru spatierea intre celule, pentru a nu fi inghesuite una in alta, in cazul in care avem un tabel fara contururi intre celule, am adaugat ultima linie de cod, care determina distanta intre continutul celulei si contur.
Rezultat:

Linia dubla, din interior, apare doar daca la crearea tabelului in postari se defineste o grosime pentru ea:
Cod:
[table border=X]

Rezultatul:


Multumesc pentru ajutor!  topic rezolvat

Ina
Membru activ

feminin

Mesaje : 13733
Varsta : 45
Data de inscriere : 05/03/2009
Multumiri : 79
Niciun avertisment

http://www.goblenul.com

Sus In jos

Rezolvat Re: Cod CSS eronat pentru table

Mesaj Scris de Emanuel la data de Sam 5 Mar - 18:15

topic rezolvat

Emanuel
Membru onorific
Membru onorific

masculin

Mesaje : 2960
Data de inscriere : 06/11/2012
Multumiri : 821
Niciun avertisment

http://www.infinigame.org/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum