Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Tabela w CSS
Forum PHP.pl > Forum > Przedszkole
d4nny
1.07.2009, 19:31:32
Witam, mam taki kod tabeli w css:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div>Tabela
  3. 		<div>
  4. 			<div>Jeden</div>
  5. 			<div>Dwa</div>
  6. 		</div>
  7. 		<div>
  8. 			<div>Trzy</div>
  9. 			<div>Cztery</div>
  10. 		</div>
  11.           </div>
  12. </body>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div
  2. {
  3. 	border-style: solid;
  4. 	border-color: red
  5. }
  6. body > div
  7. {
  8. 	display: table;
  9. 	border-style: solid;
  10. 	border-color: blue
  11. }
  12. body > div > div
  13. {
  14. 	display: table-row
  15. }
  16. body > div > div > div
  17. {
  18. 	display: table-cell
  19. }
[HTML] pobierz, plaintext



Jak odzielic kod tabelki aby reszta divow na stronie nie dziedziczyla wygladu ustalonego w css dla tabeli?
bobo168
1.07.2009, 19:49:33
Nadać im id bądź classe.
sadistic_son
1.07.2009, 19:57:39 
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="tabela">Tabela
  3. <div>
  4. <div id="jeden">Jeden</div>
  5. <div id="dwa">Dwa</div>
  6. </div>
  7. <div>
  8. <div id="trzy">Trzy</div>
  9. <div id="cztery">Cztery</div>
  10. </div>
  11. </div>
  12. </body>
[HTML] pobierz, plaintext



to co ma sie tyczyc w css tylko do tabeli:
[HTML] pobierz, plaintext 
  1. #tabela{
  2. xxxxxx
  3. }
[HTML] pobierz, plaintext


albo klase:
<div class="tabela">
w ccsie:
.tabela{
xxx
}
d4nny
2.07.2009, 09:08:20
na tyle żeby utworzyć klasy lub nadać nazwy warstwom jestem zorientowany, problem w tym, że to nie dziala

dokladnie spójrzcie na kod css...np. to

[HTML] pobierz, plaintext 
  1. body > div > div > div
  2. {
  3. 	display: table-cell
  4. }
[HTML] pobierz, plaintext


jak tu zastosowac to o czym mowicie?

nikt nie pomoże?
osl
2.07.2009, 09:25:29
może napisz co i jak nie działa? a najlepiej wrzuć kod na jakiś serwer...
[HTML] pobierz, plaintext 
  1. body > div > div > div
[HTML] pobierz, plaintext

takie rzeczy wykluczają użytkowników IE6, który nie obsługuje takich selektorów, a tych użytkowników jeszcze troche jest niestety...

utwórz klasy, tak jak przedmówcy radzili, np. div.table-row, div.table-cell i dodaj tam odpowiednie wartości z css-a. Nawet jak odziedziczą cokolwiek możesz to przecież nadpisać.
I jeszcze jedno - Firebug Twoim przyjacielem winksmiley.jpg
d4nny
2.07.2009, 10:48:13
problem rozwiązałem, lecz szcerze mówiąć wasze porady nie przydały mi się a zwłaszcza te pierwsze...

kod HTML

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="tabcss">Tabela
  4. <div id="tabcss">
  5. <div id="tabcss">Jeden</div>
  6. <div id="tabcss">Dwa</div>
  7. </div>
  8. <div id="tabcss">
  9. <div id="tabcss">Trzy</div>
  10. <div id="tabcss">Cztery</div>
  11. </div>
  12. </div>
[HTML] pobierz, plaintext


kod CSS

[HTML] pobierz, plaintext 
  1. #tabcss
  2. {
  3. 	border: 1px solid #999999;
  4. 	padding: 10px;
  5. }
  6. body > #tabcss
  7. {
  8. 	display: table;
  9. 	border: 1px solid #333333;
  10. }
  11. body > #tabcss > #tabcss
  12. {
  13. 	display: table-row;
  14. }
  15. body > #tabcss > #tabcss > #tabcss
  16. {
  17. 	display: table-cell;
  18. 	margin-left: 5px;
  19. }
  20.  
  21. </body>
[HTML] pobierz, plaintext


chodziło o to ze kazda warstwa musiala miec te samą nazwę, bo w htmlu są one zagniezdzone, wstawiam kod po to aby ktos kto bedzie mial podobny problem skorzystal z tego, dzieki wszystkim za chec pomocy

a tak to wyglada online http://finaldesign.pl/tabcss/tabela.html
webber
2.07.2009, 11:09:45
A potrzebne to było? Nie lepiej było użyć normalnej tabeli skoro to dane tabelaryczne jak mniemam tam będą? smile.gif
osl
2.07.2009, 11:17:03
brawo, nadałeś 7-miu divom takie samo id, a to niewiele ma wspólnego z poprawnym rozwiązaniem...
dokładnie to samo można osiągnąć przez stosowanie klas a nie id...
d4nny
2.07.2009, 12:43:38
proszę bardzo mądralo - zrob to na roznych klasach lub roznych divach, będę wdzięczny.
viking
2.07.2009, 12:49:11
A kiedy wreszcie zrozumiesz że masz tabelę? Już ci to webber próbował uzmysłowić. Pierwszy z brzegu przykład z sieci:

[HTML] pobierz, plaintext 
  1. <table>
  2. 	<thead>
  3. 		<tr>
  4. 			<th>header1</th>
  5. 			<th>header2</th>
  6. 		</tr>
  7. 	</thead>
  8. 	<tfoot>
  9. 		<tr>
  10. 			<th>footer1</th>
  11. 			<th>footer2</th>
  12. 		</tr>
  13. 	</tfoot>
  14. 	<tbody>
  15. 		<tr>
  16. 			<th>data1</th>
  17. 			<th>data2</th>
  18. 		</tr>
  19. 	</tbody>
  20. </table>
[HTML] pobierz, plaintext

Opcjonalnie <caption>.

I przeczytaj jakiś kurs np http://kurs.browsehappy.pl jeśli to nie przerasta twoich możliwości.

PS. Jaka postawa taka odpowiedź.
osl
2.07.2009, 12:56:14
ależ jesteś przekonany o tym, że jesteś nieomylny. prosze Cię bardzo, dosłownie 3 minuty roboty z zegarkiem w ręku, specjalnie dla Ciebie.
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.  div
  5. {
  6. border: 1px solid #999999;
  7. padding: 10px;
  8. }
  9. .table
  10. {
  11. display: table;
  12. border: 1px solid #333333;
  13. }
  14. .table .table-row
  15. {
  16. display: table-row;
  17. }
  18. .table .table-row .table-cell
  19. {
  20. display: table-cell;
  21. margin-left: 5px;
  22. }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div class="table">Tabela
  27.             <div class="table-row">
  28.                 <div class="table-cell">Jeden</div>
  29.                 <div class="table-cell">Dwa</div>
  30.             </div>
  31.             <div class="table-row">
  32.                 <div class="table-cell">Trzy</div>
  33.                 <div class="table-cell">Cztery</div>
  34.             </div>
  35.         </div>
  36.     </body>
  37. </html>
[HTML] pobierz, plaintext


a na przyszłość, przynajmniej udawaj uprzejmość i staraj się przyjąć do wiadomości, że ktoś inny może mieć racje.
d4nny
2.07.2009, 16:02:30
viking

Nie musisz demonstrować tego iż nie umiesz czytać ze zrozumieniem... to pokazuje tylko jak bardzo jesteś ograniczony. Prosiłem o rozwiązanie problemu z tabelką w CSS a nie o to jak wstawić dane żeby było najszybciej i najprosciej.


osl

przecież inne warstwy znajdujące się na stronie odziedziczą to
[HTML] pobierz, plaintext 
  1. div
  2. {
  3. border: 1px solid #999999;
  4. padding: 10px;
  5. }
[HTML] pobierz, plaintext


jak nie z tego układu co jest teraz to z tego, że zamierzam oddzielać CSS od HTML, czyli kod znajdzie się w pliku *.css wraz z resztą kodu CSS.
Crozin
2.07.2009, 17:01:30
@d4nny: a mógłbyś napisać co jest w ogóle Twoim celem? Bo kod jest kompletnie bez sensu.
d4nny
2.07.2009, 17:55:23
Moim celem jest tabelka zbudowana na CSS przy czym kod CSS tabelki nie może kolidować z pozostałym kodem CSS a raczej kod CSS tabelki nie moze wplywac na wyglad pozostalych warst lub klas na stronie, i tylko tyle.

ps. czyj kod jest bez sensu? ze moj jest niepoprawny to wiem...
Crozin
2.07.2009, 19:50:27
Nie o to mi chodziło - chodziło mi o to co ten kod (html) będzie miał reprezentować? Czy jest to układ strony, dane tabelaryczne czy coś innego?

A co do pierwotnego pytania: elementowi, który jest kontener dla pozostałych (tutaj ten z display: table) nadajesz identyfikator. Potem w regułach CSS odnosisz się poprzez: #identyfikator [reszta reguł jak jest]
d4nny
5.07.2009, 12:36:59
tabela to ma być treść podstrony, w środku tekst ale nie tylko

[HTML] pobierz, plaintext 
  1. div
  2. {
  3. border: 1px solid #999999;
  4. padding: 10px;
  5. }
[HTML] pobierz, plaintext


ten kod będzie nadawał wygląd każdemu DIVowi na stronie... czy nie tak ? chodzi mi o to aby zbudować tabele tak aby kod CSS odnosił sie tylko i wyłącznie do tej tabeli

no i co taka cisza?

zaśmieciliście temat banalnymi i nieprzydatnymi rozwiązaniami, niektórzy nawet durni z siebie zrobili a ja nadal nie mam tego o co prosiłem..
Sky_walker
5.07.2009, 12:50:37 
[HTML] pobierz, plaintext 
  1. .tabela div
  2. {
  3. border: 1px solid #999999;
  4. padding: 10px;
  5. }
[HTML] pobierz, plaintext

^ tylko divy w tabeli.

Edit: Tak na marginesie, piszesz "Moim celem jest tabelka zbudowana na CSS" - to jest absurdalny pomysł. To tak jakby przerabiać <span> na <div> albo <strong> na <em> w CSSie. Czegoś takiego sie nie robi. Do tabel są tabele, tak jak do pogrubień sa strongi/boldy.
d4nny
5.07.2009, 12:59:44 
[HTML] pobierz, plaintext 
  1. .table div
[HTML] pobierz, plaintext


no i o to chodzilo, jest świetnie teraz, mniej kodu HTML niż w przypadku tradycyjnej tabelki, łatwiej zmieniać wygląd i jest więcej możliwości
Sky_walker
12.07.2009, 16:53:57
Kodu jest nieporównywalnie więcej niż w tradycyjnej tabeli (tam masz tylko td i tr, a tu divy, definicje klas i ich długie nazwy), wygląd zmieniać jest jeszcze trudniej (musisz pamiętać o odpowiednim display dla każdego elementu - w zwykłej tabelce masz to z głowy), a możliwości masz tyle samo co zawsze... strasznie naciągane to robienie tabelek z divów winksmiley.jpg
Hazel
12.07.2009, 19:52:38
Co poradzisz, takie są trendy.
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.