[CSS] tabela Opcje

[lnn]

wlasnie znalazlem takie opcje w programie, domniemam po nazwie ze chodzi o to ze dany div moze zachowywac sie jak tabela??

da sie zrobic pelnowartosciowa tabele do umieszczania danych tabelarycznych w CSS zamiast za pomoca znacznikow tabeli?



bo probowalem samym tym displayem ale chyba trzeba jeszcze pozycjonowac to zeby sie pokazywalo w miejscu w ktorym powinno i zachowywalo jak trzeba?

[HTML] pobierz, plaintext 
<div class="tabela">
<div class="wiersz">
<div class="kolumna">kolumna 1 wiersz 1</div>
<div class="kolumna">kolumna 2 wiersz 1</div>
</div>
<div class="wiersz">
<div class="kolumna">kolumna 1 wiersz 2</div>
<div class="kolumna">kolumna 2 wiersz 2</div>
</div>
</div>
[HTML] pobierz, plaintext 

zeby sie np dalo cos takiego zrobic

Ten post edytował lnn 31.01.2010, 22:27:42

[Kshyhoo]

M.in.

[lnn]

ja proboje wykorzystac to display ;p ale narazie nie moge zrobic podzialu zeby dzialalo do tego kodu np powyzej ..chodzi o to ze kolumny wyswietlaja sie jedna pod druga a nie obok siebie :]

Ten post edytował lnn 31.01.2010, 22:51:52

[Kshyhoo]

[HTML] pobierz, plaintext 
<div style="display: table; border-spacing: 1px; border: 1px solid black">
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka1</div>
	<div style="display: table-cell; border: 1px solid gray">komórka2</div>
</div>
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka3</div>
	<div style="display: table-cell; border: 1px solid gray">komórka4</div>
</div>
</div>
[HTML] pobierz, plaintext 

co odpowiada:

[HTML] pobierz, plaintext 
<table style="border-spacing: 1px; border: 1px solid black">
<tr>
	<td style="border: 1px solid gray">komórka1</td>
	<td style="border: 1px solid gray">komórka2</td>
</tr>
<tr>
	<td style="border: 1px solid gray">komórka3</td>
	<td style="border: 1px solid gray">komórka4</td>
</td>
</table>
[HTML] pobierz, plaintext 

# table - tabela blokowa: <table>...</table>
# inline-table - tabela "inline": <table>...</table>
# table-row-group - grupa wierszy tabeli: <tbody>...</tbody>
# table-header-group - nagłówek tabeli: <thead>...</thead>
# table-footer-group - stopka tabeli: <tfoot>...</tfoot>
# table-row - wiersz tabeli: <tr>...</tr>
# table-column-group - grupa kolumn tabeli: <colgroup>...</colgroup>
# table-column - kolumna tabeli: <col />
# table-cell - komórka tabeli: <td>...</td>, <th>...</th>
# table-caption - tytuł (podpis) tabeli: <caption>...</caption>

Ten post edytował Kshyhoo 31.01.2010, 23:13:42

[lnn]

o dzieki wielkie wlasnie o to mi chodzilo ) dziala jak powinno +POMOGŁ

a jak zrobic w CSS taka wlasciwosc colspan

[Kshyhoo]

Sąsiednie elementy mające display:table-cell „skleją” się razem.

[lnn]

mam tak, i opcje chcialem zeby byly 3 komorki jako jedna, a robi sie tak:

[HTML] pobierz, plaintext 
div.table_user
{
    display: table;
    border-spacing: 3px;
    border: 1px solid #5BB700;
    width: 100%;
    background: white;
}
div.cell-1_user, div.cell-2_user, div.cell-3_user, div.cell-4_user, div.cell-5_user
{
    display: table-cell;
    text-align: center;
    border: 1px solid #5BB700;
    padding: 4px;
    font-size: 11px;
}
div.row-1_user
{
    display: table-row;
}
div.cell-1_user
{
    width: 4%;
}
div.cell-3_user
{
    width: 10%;
    background: yellow;
}
div.cell-4_user
{
    width: 10%;
    background: #80FF00;
}
div.cell-5_user
{
    width: 10%;
    background: red;
    color: white;
}
div.row-t_user
{
    display: table-row;
    background: #CBFF97;
    font-weight: bold;
}
div.cell-t_user
{
    display: table-cell;
}
<div class="row-t_user">
<div class="cell-1_user">lp.</div>
<div class="cell-2_user">nazwa obiektu</div>
<div class="cell-t_user">opcje</div>
</div>
[HTML] pobierz, plaintext 

poszedlem naokolo, zapewne gorna tabelka dziedziczy wartosc tej dolnej i dlatego sie nie skleja ;p
wiec zrobilem jeszcze drugi styl dla tej u gory i utworzylem oddzielna tabelke

Ten post edytował lnn 1.02.2010, 21:45:28

[Kshyhoo]

A o to biega. To chyba mam smutną wiadomość: takie rzeczy to tylko w Erze ;p
CSS-owe właściwości nie mają odpowiedników colspan z XHTML.