Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [wolontariat]tabela na div
Forum PHP.pl > Inne > Giełda ofert > Poszukuję
nospor
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
  1. <table style="border:1px solid black;">
  2. <tr >
  3. <td rowspan="3" style="text-align:center;">
  4. Imię
  5. </td>
  6.  
  7. <td rowspan="3" style="text-align:center;">
  8. Nazwisko
  9. </td>
  10. <td colspan="13" style="padding-left:1px !important;padding-right:1px !important;text-align:center;">
  11. Tytuł
  12. </td>
  13. </tr>
  14. <tr >
  15. <td colspan="13" style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:85%">2012-02</td>
  16. </tr>
  17. <tr >
  18. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">02</td>
  19. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">04</td>
  20. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">06</td>
  21. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">08</td>
  22.  
  23. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">10</td>
  24. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">12</td>
  25. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">14</td>
  26. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">16</td>
  27. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">18</td>
  28. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">20</td>
  29.  
  30. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">22</td>
  31. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">24</td>
  32. <td style="text-align:center;padding-left:1px !important;padding-right:1px !important;font-size:10px;width:6.53846153846%">26</td>
  33. </tr>
  34.  
  35. <tr >
  36. <td >
  37. Jan
  38. </td>
  39. <td>
  40. Kowalski
  41. </td>
  42. <td colspan="13" style="vertical-align: top;padding-left:0px !important;padding-right:1px !important;">
  43. Blabla
  44. </td>
  45. </tr>
  46. <tr >
  47. <td >
  48. Jan
  49. </td>
  50. <td>
  51. Kowalski
  52. </td>
  53. <td colspan="13" style="vertical-align: top;padding-left:0px !important;padding-right:1px !important;">
  54. Blabla
  55. </td>
  56. </tr>
  57. </tbody>
  58. </table>
Kshyhoo
A co to width:6.53846153846%?
nospor
szerokosc w procentach smile.gif
Jak ci nie pasują procenty to sobie zamień na powiedzmy 10px 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.
lobopol
O coś takiego ci chodzi (bez ie6 jak chcesz z ie6 to podmień first-child na jakąś klasę)?
  1. .table{
  2. border: 1px solid black;
  3. float: left;
  4. font-size: 10px;
  5. }
  6. .tr {
  7. overflow: hidden;
  8. }
  9. .tr div {
  10. float: left;
  11. width: 58px;
  12. word-wrap: break-word;
  13. text-align: center;
  14. padding: 0 1px;
  15. }
  16. .tr.body div:first-child{
  17. padding-left: 116px; /*2 razy szerokość*/
  18. }
  19. .tr .title{
  20. width: 754px; /*13 * szerokość rzędu*/
  21. }
  22. .tr.date div{
  23. width: 754px;
  24. float: none;
  25. padding-left: 121px; /*2 razy szerokość jednego rzędu + paddingi*/
  26. }
  27. </style>
  28. <div class="table">
  29. <div class="tr">
  30. <div>Imię</div>
  31. <div>Nazwisko</div>
  32. <div class="title">Tytuł</div>
  33. </div>
  34. <div class="tr date">
  35. <div>
  36. 2012-02
  37. </div>
  38. </div>
  39. <div class="tr body">
  40. <div>02</div>
  41. <div>04</div>
  42. <div>06</div>
  43. <div>08</div>
  44. <div>10</div>
  45. <div>12</div>
  46. <div>14</div>
  47. <div>16</div>
  48. <div>18</div>
  49. <div>20</div>
  50. <div>22</div>
  51. <div>24</div>
  52. <div>26</div>
  53. </div>
  54. <div class="tr">
  55. <div>Jan</div>
  56. <div>Kowalski</div>
  57. <div>Blabla</div>
  58. </div>
  59. <div class="tr">
  60. <div>Jan</div>
  61. <div>Kowalski</div>
  62. <div>Blabla</div>
  63. </div>
  64. </div>
nospor
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 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.
lobopol
To za jakąś godzinę zerknę, Może da się zrobić, bo wkleiłem sobie twój kod wcześniej i efekt był porównywalny smile.gif

  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.  


Nieco kosmetycznych poprawek w środku by się przydało, nie wiem jak to będzie działać w ie (ie8 z grubsza działa).
nospor
Prawie prawie 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.
lobopol
Na chwilę obecną widzę tylko sztywne rozwiązanie w stylu:

  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. }
nospor
Takie buty.... no dobra, spróbuję coś z tym zrobić i dam znać jak wyszło. Wstępnie dziękuję smile.gif
Jakby ktoś miał jeszcze jakieś inne rozwiązania, chętnie obejrzę smile.gif
wookieb
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ć?
nospor
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..... tongue.gif

Temat: mpdf html z pozycjonowaniem
smile.gif
wookieb
sad.gif
Na przyszłość, do robienia takich rzeczy może CI się przydać http://twitter.github.com/bootstrap/scaffolding.html
nospor
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 smile.gif

@lobopol dzięki wielkie za pomoc - wstępnie wydaje się, że wszystko działa. PDF generuje się piknie z takiego html.
lobopol
Przyznam szczerze, że nieco jestem w szoku, że udało się z tego pdf zrobić smile.gif
nospor
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ć smile.gif
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.