Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

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





Grupa: Moderatorzy
Postów: 36 561
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
lobopol
post
Post #2





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

Posty w temacie
- nospor   [wolontariat]tabela na div   17.02.2012, 18:45:50
- - Kshyhoo   A co to width:6.53846153846%?   17.02.2012, 19:37:14
- - nospor   szerokosc w procentach Jak ci nie pasują procenty...   17.02.2012, 19:44:41
- - lobopol   O coś takiego ci chodzi (bez ie6 jak chcesz z ie6 ...   17.02.2012, 21:10:06
- - nospor   NIe do końca. Na poniższym obrazku pokazałem, jak ...   18.02.2012, 10:48:57
- - lobopol   To za jakąś godzinę zerknę, Może da się zrobić, bo...   18.02.2012, 13:00:10
- - nospor   Prawie prawie Użyłeś position:relative. Idzie to ...   18.02.2012, 13:57:20
- - lobopol   Na chwilę obecną widzę tylko sztywne rozwiązanie w...   18.02.2012, 14:11:06
- - nospor   Takie buty.... no dobra, spróbuję coś z tym zrobić...   18.02.2012, 14:21:24
- - wookieb   Tabela służy do przedstawiania danych tabelaryczny...   18.02.2012, 15:27:45
- - nospor   wookieb, ale że ty mnie uważasz za kretyna, który ...   18.02.2012, 15:29:54
- - wookieb   Na przyszłość, do robienia takich rzeczy może CI s...   18.02.2012, 15:32:27
- - nospor   Ok, dzięki za link. Poprostu strasznie nie lubię ...   18.02.2012, 16:20:25
- - lobopol   Przyznam szczerze, że nieco jestem w szoku, że uda...   18.02.2012, 16:36:41
- - nospor   Hehe, no właśnie się okazało, że PDF ma trochę inn...   18.02.2012, 16:39:58

« 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 · Przełącz na: Linearny+ · Drzewo

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

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