Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] tabela
Forum PHP.pl > Forum > Przedszkole
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 winksmiley.jpg ale chyba trzeba jeszcze pozycjonowac to zeby sie pokazywalo w miejscu w ktorym powinno i zachowywalo jak trzeba?

  1. <div class="tabela">
  2. <div class="wiersz">
  3. <div class="kolumna">kolumna 1 wiersz 1</div>
  4. <div class="kolumna">kolumna 2 wiersz 1</div>
  5. </div>
  6. <div class="wiersz">
  7. <div class="kolumna">kolumna 1 wiersz 2</div>
  8. <div class="kolumna">kolumna 2 wiersz 2</div>
  9. </div>
  10. </div>

zeby sie np dalo cos takiego zrobic tongue.gif
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 :]
Kshyhoo
  1. <div style="display: table; border-spacing: 1px; border: 1px solid black">
  2. <div style="display: table-row">
  3. <div style="display: table-cell; border: 1px solid gray">komórka1</div>
  4. <div style="display: table-cell; border: 1px solid gray">komórka2</div>
  5. </div>
  6. <div style="display: table-row">
  7. <div style="display: table-cell; border: 1px solid gray">komórka3</div>
  8. <div style="display: table-cell; border: 1px solid gray">komórka4</div>
  9. </div>
  10. </div>

co odpowiada:
  1. <table style="border-spacing: 1px; border: 1px solid black">
  2. <tr>
  3. <td style="border: 1px solid gray">komórka1</td>
  4. <td style="border: 1px solid gray">komórka2</td>
  5. </tr>
  6. <tr>
  7. <td style="border: 1px solid gray">komórka3</td>
  8. <td style="border: 1px solid gray">komórka4</td>
  9. </td>


# 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>
lnn
o dzieki wielkie wlasnie o to mi chodzilo smile.gif) dziala jak powinno snitch.gif +POMOGŁ

a jak zrobic w CSS taka wlasciwosc colspanquestionmark.gif
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:



  1. div.table_user
  2. {
  3. display: table;
  4. border-spacing: 3px;
  5. border: 1px solid #5BB700;
  6. width: 100%;
  7. background: white;
  8. }
  9. div.cell-1_user, div.cell-2_user, div.cell-3_user, div.cell-4_user, div.cell-5_user
  10. {
  11. display: table-cell;
  12. text-align: center;
  13. border: 1px solid #5BB700;
  14. padding: 4px;
  15. font-size: 11px;
  16. }
  17. div.row-1_user
  18. {
  19. display: table-row;
  20. }
  21. div.cell-1_user
  22. {
  23. width: 4%;
  24. }
  25. div.cell-3_user
  26. {
  27. width: 10%;
  28. background: yellow;
  29. }
  30. div.cell-4_user
  31. {
  32. width: 10%;
  33. background: #80FF00;
  34. }
  35. div.cell-5_user
  36. {
  37. width: 10%;
  38. background: red;
  39. color: white;
  40. }
  41. div.row-t_user
  42. {
  43. display: table-row;
  44. background: #CBFF97;
  45. font-weight: bold;
  46. }
  47. div.cell-t_user
  48. {
  49. display: table-cell;
  50. }
  51. <div class="row-t_user">
  52. <div class="cell-1_user">lp.</div>
  53. <div class="cell-2_user">nazwa obiektu</div>
  54. <div class="cell-t_user">opcje</div>
  55. </div>


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
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.