Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS] Przeglądanie danych tabeli z użyciem suwaka
Baku12345
post 29.03.2019, 04:30:29
Post #1





Grupa: Zarejestrowani
Postów: 46
Pomógł: 1
Dołączył: 23.04.2011

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


Witam
Robię stronę, której budowa, mniej więcej będzie wyglądała tak

Czyli nagłówek, menu, pole na kontent (w którym jest tabela) i stopka. Oczywiście to co pokazuję, to tylko strona testowa, nie ta właściwa smile.gif

I chodzi mi właśnie o tą tabelkę z suwakiem po prawej. Chciałbym, żeby nagłówki w obszarze thead, były nieruchome, a tylko dane na szarym tle w obszarze tbody, żeby się przesuwały.
Czy mógłby mi ktoś momóc poprawić kod, żeby tylko szary obszar się przesuwał, bez brązowego? Proszę o pomoc, poniżej wstawiam kod

HTML
  1. <!doctype html>
  2.  
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Strona</title>
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. </head>
  8. <body>
  9. <header>
  10. naglowek
  11. </header>
  12. <nav>menu</nav>
  13. <article>
  14. <tr>
  15. <th><a href="#">Header 1</a></th>
  16. <th><a href="#">Header 2</a></th>
  17. <th><a href="#">Header 3</a></th>
  18. </tr>
  19. </thead>
  20. <tr>
  21. <td>Cell Content 1</td>
  22. <td>Cell Content 2</td>
  23. <td>Cell Content 3</td>
  24. </tr>
  25. <tr>
  26. <td>More Cell Content 1</td>
  27. <td>More Cell Content 2</td>
  28. <td>More Cell Content 3</td>
  29. </tr>
  30. <tr>
  31. <td>Even More Cell Content 1</td>
  32. <td>Even More Cell Content 2</td>
  33. <td>Even More Cell Content 3</td>
  34. </tr>
  35. <tr>
  36. <td>And Repeat 1</td>
  37. <td>And Repeat 2</td>
  38. <td>And Repeat 3</td>
  39. </tr>
  40. <tr>
  41. <td>Cell Content 1</td>
  42. <td>Cell Content 2</td>
  43. <td>Cell Content 3</td>
  44. </tr>
  45. <tr>
  46. <td>More Cell Content 1</td>
  47. <td>More Cell Content 2</td>
  48. <td>More Cell Content 3</td>
  49. </tr>
  50. <tr>
  51. <td>Even More Cell Content 1</td>
  52. <td>Even More Cell Content 2</td>
  53. <td>Even More Cell Content 3</td>
  54. </tr>
  55. <tr>
  56. <td>And Repeat 1</td>
  57. <td>And Repeat 2</td>
  58. <td>And Repeat 3</td>
  59. </tr>
  60. <tr>
  61. <td>Cell Content 1</td>
  62. <td>Cell Content 2</td>
  63. <td>Cell Content 3</td>
  64. </tr>
  65. <tr>
  66. <td>More Cell Content 1</td>
  67. <td>More Cell Content 2</td>
  68. <td>More Cell Content 3</td>
  69. </tr>
  70. <tr>
  71. <td>Even More Cell Content 1</td>
  72. <td>Even More Cell Content 2</td>
  73. <td>Even More Cell Content 3</td>
  74. </tr>
  75. <tr>
  76. <td>And Repeat 1</td>
  77. <td>And Repeat 2</td>
  78. <td>And Repeat 3</td>
  79. </tr>
  80. <tr>
  81. <td>Cell Content 1</td>
  82. <td>Cell Content 2</td>
  83. <td>Cell Content 3</td>
  84. </tr>
  85. <tr>
  86. <td>More Cell Content 1</td>
  87. <td>More Cell Content 2</td>
  88. <td>More Cell Content 3</td>
  89. </tr>
  90. <tr>
  91. <td>Even More Cell Content 1</td>
  92. <td>Even More Cell Content 2</td>
  93. <td>Even More Cell Content 3</td>
  94. </tr>
  95. <tr>
  96. <td>And Repeat 1</td>
  97. <td>And Repeat 2</td>
  98. <td>And Repeat 3</td>
  99. </tr>
  100. <tr>
  101. <td>Cell Content 1</td>
  102. <td>Cell Content 2</td>
  103. <td>Cell Content 3</td>
  104. </tr>
  105. <tr>
  106. <td>More Cell Content 1</td>
  107. <td>More Cell Content 2</td>
  108. <td>More Cell Content 3</td>
  109. </tr>
  110. <tr>
  111. <td>Even More Cell Content 1</td>
  112. <td>Even More Cell Content 2</td>
  113. <td>Even More Cell Content 3</td>
  114. </tr>
  115. <tr>
  116. <td>And Repeat 1</td>
  117. <td>And Repeat 2</td>
  118. <td>And Repeat 3</td>
  119. </tr>
  120. <tr>
  121. <td>Cell Content 1</td>
  122. <td>Cell Content 2</td>
  123. <td>Cell Content 3</td>
  124. </tr>
  125. <tr>
  126. <td>More Cell Content 1</td>
  127. <td>More Cell Content 2</td>
  128. <td>More Cell Content 3</td>
  129. </tr>
  130. <tr>
  131. <td>Even More Cell Content 1</td>
  132. <td>Even More Cell Content 2</td>
  133. <td>Even More Cell Content 3</td>
  134. </tr>
  135. <tr>
  136. <td>And Repeat 1</td>
  137. <td>And Repeat 2</td>
  138. <td>And Repeat 3</td>
  139. </tr>
  140. <tr>
  141. <td>Cell Content 1</td>
  142. <td>Cell Content 2</td>
  143. <td>Cell Content 3</td>
  144. </tr>
  145. <tr>
  146. <td>More Cell Content 1</td>
  147. <td>More Cell Content 2</td>
  148. <td>More Cell Content 3</td>
  149. </tr>
  150. <tr>
  151. <td>Even More Cell Content 1</td>
  152. <td>Even More Cell Content 2</td>
  153. <td>Even More Cell Content 3</td>
  154. </tr>
  155. <tr>
  156. <td>And Repeat 1</td>
  157. <td>And Repeat 2</td>
  158. <td>And Repeat 3</td>
  159. </tr>
  160. <tr>
  161. <td>Cell Content 1</td>
  162. <td>Cell Content 2</td>
  163. <td>Cell Content 3</td>
  164. </tr>
  165. <tr>
  166. <td>More Cell Content 1</td>
  167. <td>More Cell Content 2</td>
  168. <td>More Cell Content 3</td>
  169. </tr>
  170. <tr>
  171. <td>Even More Cell Content 1</td>
  172. <td>Even More Cell Content 2</td>
  173. <td>Even More Cell Content 3</td>
  174. </tr>
  175. <tr>
  176. <td>And Repeat 1</td>
  177. <td>And Repeat 2</td>
  178. <td>And Repeat 3</td>
  179. </tr>
  180. <tr>
  181. <td>Cell Content 1</td>
  182. <td>Cell Content 2</td>
  183. <td>Cell Content 3</td>
  184. </tr>
  185. <tr>
  186. <td>More Cell Content 1</td>
  187. <td>More Cell Content 2</td>
  188. <td>More Cell Content 3</td>
  189. </tr>
  190. <tr>
  191. <td>Even More Cell Content 1</td>
  192. <td>Even More Cell Content 2</td>
  193. <td>Even More Cell Content 3</td>
  194. </tr>
  195. </tbody>
  196. </table>
  197. </article>
  198. <footer>
  199. stopka
  200. </footer>
  201. </body>
  202. </html>


CSS
  1. html, body {
  2. height: 100%;
  3. margin: 0;
  4. }
  5.  
  6. header {
  7. background: red;
  8. height: 10%;
  9. }
  10.  
  11. nav {
  12. background: green;
  13. height: 10%;
  14. }
  15.  
  16. article {
  17. background: yellow;
  18. height: 65%;
  19. position: relative;
  20. overflow: auto;
  21. }
  22.  
  23. table {
  24. width: 100%;
  25. border-collapse: collapse;
  26. }
  27.  
  28. thead th {
  29. background: #C96;
  30. border-left: 1px solid #EB8;
  31. border-right: 1px solid #B74;
  32. border-top: 1px solid #EB8;
  33. font-weight: normal;
  34. padding: 4px 3px;
  35. text-align: left;
  36. }
  37.  
  38. thead a,
  39. thead a:link,
  40. thead a:visited {
  41. color: #FFF;
  42. text-decoration: none;
  43. }
  44.  
  45. thead a:hover {
  46. text-decoration: underline;
  47. }
  48.  
  49. tbody {
  50. overflow: auto;
  51. }
  52.  
  53. tbody tr td {
  54. background: #EEE;
  55. border-left: 1px solid #DDD;
  56. border-right: 1px solid #CCC;
  57. border-top: 1px solid #DDD;
  58. padding: 2px 3px;
  59. }
  60.  
  61. footer {
  62. background: blue;
  63. height: 15%;
  64. }


Z góry dziękuję za pomoc

Ten post edytował Baku12345 29.03.2019, 04:31:19
Go to the top of the page
+Quote Post
dublinka
post 29.03.2019, 05:51:58
Post #2





Grupa: Zarejestrowani
Postów: 594
Pomógł: 66
Dołączył: 22.02.2008
Skąd: Dublin

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


  1.  
  2. <table cellspacing="0" cellpadding="0" border="0" width="325">
  3. <tr>
  4. <td>
  5. <table cellspacing="0" cellpadding="1" border="1" width="300" >
  6. <tr style="color:white;background-color:grey">
  7. <th>Header 1</th>
  8. <th>Header 2</th>
  9. </tr>
  10. </table>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td>
  15. <div style="width:320px; height:60px; overflow:auto;">
  16. <table cellspacing="0" cellpadding="1" border="1" width="300" >
  17. <tr>
  18. <td>new item</td>
  19. <td>new item</td>
  20. </tr>
  21. <tr>
  22. <td>new item</td>
  23. <td>new item</td>
  24. </tr>
  25. <tr>
  26. <td>new item</td>
  27. <td>new item</td>
  28. </tr>
  29. <tr>
  30. <td>new item</td>
  31. <td>new item</td>
  32. </tr>
  33. </table>
  34. </div>
  35. </td>
  36. </tr>


Ten post edytował dublinka 29.03.2019, 05:53:02


--------------------
Go to the top of the page
+Quote Post
Baku12345
post 5.04.2019, 04:22:55
Post #3





Grupa: Zarejestrowani
Postów: 46
Pomógł: 1
Dołączył: 23.04.2011

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


To jeszcze raz ja. Udało mi się uzyskać taki efekt jak chciałem, czyli suwak pod nagłówkami z prawej strony, w głównej części tabeli

ale przez to powstał drugi problem. Ponieważ suwak zaczął zajmować część powierzchni przeznaczonej na treść, to ramki z nagłówków nie były dopasowane z ramkami od treści tabeli (czerwone strzałki).
Miałem więc 2 wyjścia, albo dodać czwartą komórkę w nagłówku (o szerokości takiej jak suwak), żeby wyrównać przesunięcie, albo uczynić suwak niewidocznym (niezajmującym miejsca), ale dalej działającym. Wybrałem to drugie i usunąłem problemy, a strona zaczęła wyglądać tak

czyli w polu na treść były dwie tabele, jedna z nagłówkami, a druga objęta znacznikami div z treścią. Oto skrócony fragment kodu

HTML
  1. <header>
  2. naglowek
  3. </header>
  4. <nav>menu</nav>
  5. <article>
  6. <div class="thead">
  7. <tr>
  8. <th><a href="#">Header 1</a></th>
  9. <th><a href="#">Header 2</a></th>
  10. <th><a href="#">Header 3</a></th>
  11. </tr>
  12. </table>
  13. </div>
  14. <div class="tbody">
  15. <tr>
  16. <td>new item</td>
  17. <td>new item</td>
  18. <td>new item</td>
  19. </tr>
  20. {tu wyciąłem kod dla lepszej czytelności, by lepiej zobrazować, o co mi chodzi}
  21. <tr>
  22. <td>new item</td>
  23. <td>new item</td>
  24. <td>new item</td>
  25. </tr>
  26. </table>
  27. </div>
  28. </article>
  29. <footer>
  30. stopka
  31. </footer>
  32. </body>


CSS
  1. html, body {
  2. height: 100%;
  3. margin: 0;
  4. }
  5.  
  6. header {
  7. background: red;
  8. height: 10%;
  9. }
  10.  
  11. nav {
  12. background: green;
  13. height: 10%;
  14. }
  15.  
  16. article {
  17. background: yellow;
  18. height: 65%;
  19. }
  20.  
  21. table {
  22. width: 100%;
  23. height: 100%;
  24. border-collapse: collapse;
  25. }
  26.  
  27. div.thead {
  28. width: 100%;
  29. height: 7%;
  30. position: relative;
  31. }
  32.  
  33. div.thead table tr th {
  34. background: #C96;
  35. border-left: 1px solid #EB8;
  36. border-right: 1px solid #B74;
  37. border-top: 1px solid #EB8;
  38. font-weight: normal;
  39. padding: 0.5%;
  40. text-align: left;
  41. }
  42.  
  43. div.thead table tr th a,
  44. div.thead table tr th a:link,
  45. div.thead table tr th a:visited {
  46. color: #FFF;
  47. text-decoration: none;
  48. }
  49.  
  50. div.thead table tr th a:hover {
  51. text-decoration: underline;
  52. }
  53.  
  54. div.tbody {
  55. width: 100%;
  56. height: 93%;
  57. overflow: auto;
  58. scrollbar-width: none;
  59. -ms-overflow-style: none;
  60. position: relative;
  61. }
  62.  
  63. div.tbody::-webkit-scrollbar {
  64. display: none;
  65. }
  66.  
  67. div.tbody table tr td {
  68. background: #EEE;
  69. border-left: 1px solid #DDD;
  70. border-right: 1px solid #CCC;
  71. border-top: 1px solid #DDD;
  72. padding: 0.5%;
  73. }
  74.  
  75. footer {
  76. background: blue;
  77. height: 15%;
  78. }


Jednak ja chciałem to zrobić trochę bardziej elegancko i nie na divach i dwóch tabelach, tylko na jednej tabeli i specjalnych dedykowanych znacznikach pod header i treść. Chciałem wydzielić sekcje na jednej tabeli thead i tbody. I tu się zaczęły kłopoty. Chciałem to przerobić tak

Czyli jedna tabela z sekcjami zamiast dwie. Przerobiłem to tak

HTML
  1. <header>
  2. naglowek
  3. </header>
  4. <nav>menu</nav>
  5. <article>
  6. <tr>
  7. <th><a href="#">Header 1</a></th>
  8. <th><a href="#">Header 2</a></th>
  9. <th><a href="#">Header 3</a></th>
  10. </tr>
  11. </thead>
  12. <tr>
  13. <td>new item</td>
  14. <td>new item</td>
  15. <td>new item</td>
  16. </tr>
  17. {tu wyciąłem kod dla lepszej czytelności, by lepiej zobrazować, o co mi chodzi}
  18. <tr>
  19. <td>new item</td>
  20. <td>new item</td>
  21. <td>new item</td>
  22. </tr>
  23. </tbody>
  24. </table>
  25. </article>
  26. <footer>
  27. stopka
  28. </footer>
  29. </body>


CSS
  1. html, body {
  2. height: 100%;
  3. margin: 0;
  4. }
  5.  
  6. header {
  7. background: red;
  8. height: 10%;
  9. }
  10.  
  11. nav {
  12. background: green;
  13. height: 10%;
  14. }
  15.  
  16. article {
  17. background: yellow;
  18. height: 65%;
  19. }
  20.  
  21. table {
  22. width: 100%;
  23. height: 100%;
  24. border-collapse: collapse;
  25.  
  26. }
  27.  
  28. thead {
  29. width: 100%;
  30. height: 7%;
  31. position: relative;
  32. }
  33.  
  34. thead tr th {
  35. background: #C96;
  36. border-left: 1px solid #EB8;
  37. border-right: 1px solid #B74;
  38. border-top: 1px solid #EB8;
  39. font-weight: normal;
  40. padding: 0.5%;
  41. text-align: left;
  42. }
  43.  
  44. thead tr th a,
  45. thead tr th a:link,
  46. thead tr th a:visited {
  47. color: #FFF;
  48. text-decoration: none;
  49. }
  50.  
  51. thead tr th a:hover {
  52. text-decoration: underline;
  53. }
  54.  
  55. tbody {
  56. width: 100%;
  57. height: 93%;
  58. overflow: auto;
  59. scrollbar-width: none;
  60. -ms-overflow-style: none;
  61. position: relative;
  62. }
  63.  
  64. tbody::-webkit-scrollbar {
  65. display: none;
  66. }
  67.  
  68. tbody tr td {
  69. background: #EEE;
  70. border-left: 1px solid #DDD;
  71. border-right: 1px solid #CCC;
  72. border-top: 1px solid #DDD;
  73. padding: 0.5%;
  74. }
  75.  
  76. footer {
  77. background: blue;
  78. height: 15%;
  79. }


I teraz pytanie podsumowujące, dlaczego, gdy używam znaczników table, to wszystko działa, a jak zmieniam je na sekcje thead i tbody, to się sypie i strona zaczyna wyglądać tak?


Ten post edytował Baku12345 5.04.2019, 04:27:21
Go to the top of the page
+Quote Post
viking
post 5.04.2019, 06:28:36
Post #4





Grupa: Zarejestrowani
Postów: 6 376
Pomógł: 1116
Dołączył: 30.08.2006

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


Masz pelno przykładów https://stackoverflow.com/questions/1706729...ll-inside-tbody


--------------------
Go to the top of the page
+Quote Post
Baku12345
post 8.04.2019, 04:17:02
Post #5





Grupa: Zarejestrowani
Postów: 46
Pomógł: 1
Dołączył: 23.04.2011

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


Kurcze Panowie, dalej mam z tym problem

Zrobiłem na divach i dwóch tabelkach i działa jak chciałem
div i table

A gdy to samo próbuję zrobić na jednej ze znacznikami thead i tbody, to się sypie
thead i tbody


Czy mógłby mi ktoś z tym pomóc, bo już nie mam siły i od kilku dni się męczę?

Ten post edytował Baku12345 9.04.2019, 02:33:45
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 2.05.2025 - 05:18