Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [wolontariat]tabela na div
nospor
post
Post #1





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Potrzebuję pomocy osoby, która zamieni mi poniższą tabelkę na same DIVy tak, by wyglądało tak samo jak by to było w tabelce
[HTML] pobierz, plaintext 
  1. 	<table style="border:1px solid black;">
  2. 	<tbody>
  3. 		<tr >
  4. 			<td rowspan="3" style="text-align:center;">
  5. 				Imię
  6. 			</td>
  7.  
  8. 			<td rowspan="3" style="text-align:center;">
  9. 				Nazwisko
  10. 			</td>
  11. 			<td colspan="13" style="padding-left:1px !important;padding-right:1px !important;text-align:center;">
  12. 					Tytuł
  13. 			</td>
  14. 		</tr>
  15. 		<tr >
  16. 			<td colspan="13" style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:85%">2012-02</td>
  17. 		</tr>
  18. 		<tr >
  19. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">02</td>
  20. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">04</td>
  21. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">06</td>
  22. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">08</td>
  23.  
  24. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">10</td>
  25. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">12</td>
  26. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">14</td>
  27. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">16</td>
  28. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">18</td>
  29. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">20</td>
  30.  
  31. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">22</td>
  32. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">24</td>
  33. 			<td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">26</td>
  34. 		</tr>
  35.  
  36. 		<tr >
  37. 			<td >
  38. 				Jan
  39. 			</td>
  40. 			<td>
  41. 				Kowalski
  42. 			</td>
  43. 			<td colspan="13" style="vertical-align: top;padding-left:0px !important;padding-right:1px !important;">
  44. 				Blabla
  45. 			</td>
  46. 		</tr>
  47. 		<tr >
  48. 			<td >
  49. 				Jan
  50. 			</td>
  51. 			<td>
  52. 				Kowalski
  53. 			</td>
  54. 			<td colspan="13" style="vertical-align: top;padding-left:0px !important;padding-right:1px !important;">
  55. 				Blabla
  56. 			</td>
  57. 		</tr>
  58. 		</tbody>
  59. 	</table>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 14)
Kshyhoo
post
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
A co to width:6.53846153846%?
Go to the top of the page
+Quote Post
nospor
post
Post #3





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
szerokosc w procentach (IMG:style_emoticons/default/smile.gif)
Jak ci nie pasują procenty to sobie zamień na powiedzmy 10px (IMG:style_emoticons/default/smile.gif)

Nie chodzi mi o wartosci w szerokosci, tylko o to, by dało sie to zamienic na divy i zgadzało się wszystko.
Go to the top of the page
+Quote Post
lobopol
post
Post #4





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

O coś takiego ci chodzi (bez ie6 jak chcesz z ie6 to podmień first-child na jakąś klasę)?
[HTML] pobierz, plaintext 
  1. <style>
  2. 					.table{
  3. 						border: 1px solid black;
  4. 						float: left;
  5. font-size: 10px;
  6. 					}
  7. 					.tr {
  8. 						overflow: hidden;
  9. 					}
  10. 					.tr div {
  11. 						float: left;
  12. 						width: 58px;
  13. 						word-wrap: break-word;
  14. 						text-align: center;
  15. 						padding: 0 1px;
  16. 					}
  17. 					.tr.body div:first-child{
  18. 						padding-left: 116px; /*2 razy szerokość*/
  19. 					}
  20. 					.tr .title{
  21. 						width: 754px; /*13 * szerokość rzędu*/
  22. 					}
  23. 					.tr.date div{
  24. 						width: 754px;
  25. 						float: none;
  26. 						padding-left: 121px; /*2 razy szerokość jednego rzędu + paddingi*/
  27. 					}
  28. 				</style>
  29. 				<div class="table">
  30. 					<div class="tr">
  31. 						<div>Imię</div>
  32. 						<div>Nazwisko</div>
  33. 						<div class="title">Tytuł</div>
  34. 					</div>
  35. 					<div class="tr date">
  36. 						<div>
  37. 							2012-02
  38. 						</div>
  39. 					</div>
  40. 					<div class="tr body">
  41. 						<div>02</div>
  42. 						<div>04</div>
  43. 						<div>06</div>
  44. 						<div>08</div>
  45. 						<div>10</div>
  46. 						<div>12</div>
  47. 						<div>14</div>
  48. 						<div>16</div>
  49. 						<div>18</div>
  50. 						<div>20</div>
  51. 						<div>22</div>
  52. 						<div>24</div>
  53. 						<div>26</div>
  54. 					</div>
  55. 					<div class="tr">
  56. 						<div>Jan</div>
  57. 						<div>Kowalski</div>
  58. 						<div>Blabla</div>
  59. 					</div>
  60. 					<div class="tr">
  61. 						<div>Jan</div>
  62. 						<div>Kowalski</div>
  63. 						<div>Blabla</div>
  64. 					</div>
  65. 				</div>
[HTML] pobierz, plaintext


Ten post edytował lobopol 17.02.2012, 21:11:18
Go to the top of the page
+Quote Post
nospor
post
Post #5





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
NIe do końca. Na poniższym obrazku pokazałem, jak powinny wyglądać poszczególne divy
http://nospor.pl/table.png
Nie patrz na grubość linii - tak mi się narysowało (IMG:style_emoticons/default/smile.gif)


ps:
Blok w lewym górnym rogu IMIE NAZWISKO wysokością jest uzależniony od trzech wierszy po jego prawej. Czyli jaby pojawił się czwarty wiersz albo piąty albo wiecej to blok po lewej IMIE NAZWISKO powinien wysokością dostosować się do nich. Nie wiem, czy to jest w ogóle możliwe.
Go to the top of the page
+Quote Post
lobopol
post
Post #6





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

To za jakąś godzinę zerknę, Może da się zrobić, bo wkleiłem sobie twój kod wcześniej i efekt był porównywalny (IMG:style_emoticons/default/smile.gif) 

[HTML] pobierz, plaintext 
  1.  *{margin:0;padding:0}
  2.             .table {
  3.                 font-size: 11px;
  4.                 line-height: 20px;
  5.                 overflow: hidden;
  6.                 border: 1px solid black;
  7.                 width: 900px;
  8.             }
  9.             .table span{
  10.                 display: inline-block;
  11.                 top: 50%;
  12.                 position: absolute;
  13.                 text-align: center;
  14.                 width: 118px;
  15.             }
  16.             .table div{
  17.                 overflow: hidden;
  18.             }
  19.             .tr:first-child{
  20.                 border-top:0;
  21.             }
  22.             .tr {
  23.                 border-top: 1px solid pink;
  24.                 clear:both;
  25.                 padding-left: 1px;
  26.             }
  27.             .tr.no{
  28.                 border-top: 0;
  29.             }
  30.             .tr.no div:first-child{
  31.                 border-top: 1px solid pink;
  32.             }
  33.             .tr .name{
  34.                 float: left;
  35.                 text-align: center;
  36.                 width: 118px;
  37.             }
  38.             .tr .costam {
  39.                 float: left;
  40.                 padding-left: 10px;
  41.                 border-left: 1px solid pink;
  42.             }
  43.             .tr >div{
  44.                 float:right;
  45.                 position: relative;
  46.             }
  47.             .title, .date,.numbers{
  48.                 width: 780px;
  49.                 text-align:center;
  50.                 float: right;
  51.                 border-left: 1px solid pink;
  52.                 border-bottom: 1px solid pink;
  53.             }
  54.             .numbers div{
  55.                 float: left;
  56.                 width: 59px;
  57.                 border-left: 1px solid pink;
  58.             }
  59.             .numbers div:first-child{
  60.                 border-left: 0;
  61.             }
  62.  
  63. <div class="table">
  64.             <div class="tr">
  65.                 <div>
  66.                     <span>Imie i nazwisko</span>
  67.  
  68.                     <div class="title">
  69.                         Tytuł
  70.                     </div>
  71.                     <div class="date">
  72.                         2012-02
  73.                     </div>
  74.                     <div class="numbers">
  75.                         <div>02</div>
  76.                         <div>04</div>
  77.                         <div>06</div>
  78.                         <div>08</div>
  79.                         <div>10</div>
  80.                         <div>12</div>
  81.                         <div>14</div>
  82.                         <div>16</div>
  83.                         <div>18</div>
  84.                         <div>20</div>
  85.                         <div>22</div>
  86.                         <div>24</div>
  87.                         <div>26</div>
  88.                     </div>
  89.                     <div class="numbers">
  90.                         <div>02</div>
  91.                         <div>04</div>
  92.                         <div>06</div>
  93.                         <div>08</div>
  94.                         <div>10</div>
  95.                         <div>12</div>
  96.                         <div>14</div>
  97.                         <div>16</div>
  98.                         <div>18</div>
  99.                         <div>20</div>
  100.                         <div>22</div>
  101.                         <div>24</div>
  102.                         <div>26</div>
  103.                     </div>
  104.                     <div class="numbers">
  105.                         <div>02</div>
  106.                         <div>04</div>
  107.                         <div>06</div>
  108.                         <div>08</div>
  109.                         <div>10</div>
  110.                         <div>12</div>
  111.                         <div>14</div>
  112.                         <div>16</div>
  113.                         <div>18</div>
  114.                         <div>20</div>
  115.                         <div>22</div>
  116.                         <div>24</div>
  117.                         <div>26</div>
  118.                     </div>
  119.                     <div class="numbers">
  120.                         <div>02</div>
  121.                         <div>04</div>
  122.                         <div>06</div>
  123.                         <div>08</div>
  124.                         <div>10</div>
  125.                         <div>12</div>
  126.                         <div>14</div>
  127.                         <div>16</div>
  128.                         <div>18</div>
  129.                         <div>20</div>
  130.                         <div>22</div>
  131.                         <div>24</div>
  132.                         <div>26</div>
  133.                     </div>
  134.                     <div class="numbers">
  135.                         <div>02</div>
  136.                         <div>04</div>
  137.                         <div>06</div>
  138.                         <div>08</div>
  139.                         <div>10</div>
  140.                         <div>12</div>
  141.                         <div>14</div>
  142.                         <div>16</div>
  143.                         <div>18</div>
  144.                         <div>20</div>
  145.                         <div>22</div>
  146.                         <div>24</div>
  147.                         <div>26</div>
  148.                     </div>
  149.                 </div>
  150.             </div>
  151.             <div class="tr no">
  152.                 <div class="name">
  153.                     Imie i nazwisko
  154.                 </div>
  155.                 <div class="costam">sdsadsadasdas</div>
  156.             </div>
  157.             <div class="tr">
  158.                 <div class="name">
  159.                     Imie i nazwisko
  160.                 </div>
  161.                 <div class="costam">sdsadsadasdas</div>
  162.             </div>
  163.         </div>
  164.  
[HTML] pobierz, plaintext


Nieco kosmetycznych poprawek w środku by się przydało, nie wiem jak to będzie działać w ie (ie8 z grubsza działa).
Go to the top of the page
+Quote Post
nospor
post
Post #7





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Prawie prawie (IMG:style_emoticons/default/smile.gif)
Użyłeś position:relative. Idzie to zrobić bez tego?

Bo ja na podstawie tego html będę generował pdf, a ten niestety nie uznaję czegoś takiego jak position:relative|absolute , ogólnie pozycjonowania.
Go to the top of the page
+Quote Post
lobopol
post
Post #8





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

Na chwilę obecną widzę tylko sztywne rozwiązanie w stylu:

[CSS] pobierz, plaintext 
  1. .table span{
  2.                 display: block;
  3.                 float: left;
  4.                 margin-top: to wyliczane na podstawie ilości rzędów, czyli liczba rzędów * ich wysokość / 2
  5. albo
  6. line-height:  liczba rzędów * ich wysokość
  7.                 text-align: center;
  8.                 width: 118px;
  9.             }
[CSS] pobierz, plaintext


Ten post edytował lobopol 18.02.2012, 14:14:00
Go to the top of the page
+Quote Post
nospor
post
Post #9





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Takie buty.... no dobra, spróbuję coś z tym zrobić i dam znać jak wyszło. Wstępnie dziękuję (IMG:style_emoticons/default/smile.gif)
Jakby ktoś miał jeszcze jakieś inne rozwiązania, chętnie obejrzę (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
wookieb
post
Post #10





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Tabela służy do przedstawiania danych tabelarycznych (w twoim przypadku są to dane tabelaryczne).
To, że kiedyś strasznie atakowano layouty tworzone na tabelach to nie znaczy, że teraz nie należy ich kompletnie używać.
Dlaczego nie chcesz ich użyć?
Go to the top of the page
+Quote Post
nospor
post
Post #11





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
wookieb, ale że ty mnie uważasz za kretyna, który wszystko robi na DIVach, bo DIVy takie modne...... naprawdę, zraniłeś mnie głęboko..... (IMG:style_emoticons/default/tongue.gif)

Temat: mpdf html z pozycjonowaniem
(IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
wookieb
post
Post #12





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
(IMG:style_emoticons/default/sad.gif)
Na przyszłość, do robienia takich rzeczy może CI się przydać http://twitter.github.com/bootstrap/scaffolding.html
Go to the top of the page
+Quote Post
nospor
post
Post #13





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Ok, dzięki za link.

Poprostu strasznie nie lubię się babrać w DIVach i pomyślałem sobie, że za tyle lat pomagania na forum, ktoś to poprostu zrobi za mnie. Od tak, ten jeden jedyny raz (IMG:style_emoticons/default/smile.gif)

@lobopol dzięki wielkie za pomoc - wstępnie wydaje się, że wszystko działa. PDF generuje się piknie z takiego html.
Go to the top of the page
+Quote Post
lobopol
post
Post #14





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

Przyznam szczerze, że nieco jestem w szoku, że udało się z tego pdf zrobić (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
nospor
post
Post #15





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Hehe, no właśnie się okazało, że PDF ma trochę inne jednostki miary i kurcze nachodzą komórki na siebie. Ale zaczynam obchodzić to robiąc większy odstęp między lewą stroną a prawą i wydaje się działać (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Poszukuję · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 09:01
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn