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


CSS
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


Z góry dziękuję za pomoc
dublinka
29.03.2019, 05:51:58 
[HTML] pobierz, plaintext 
  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>
  37. </table>
[HTML] pobierz, plaintext
Baku12345
5.04.2019, 04:22:55
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
[HTML] pobierz, plaintext 
  1. <body>
  2. 		<header>
  3. 			naglowek
  4. 		</header>
  5. 		<nav>menu</nav>
  6. 		<article>
  7.         	<div class="thead">
  8.             	<table>
  9.                 	<tr>
  10.                     	<th><a href="#">Header 1</a></th>
  11.                         <th><a href="#">Header 2</a></th>
  12.                         <th><a href="#">Header 3</a></th>
  13.                     </tr>
  14.                 </table>
  15.             </div>
  16.             <div class="tbody">
  17.                 <table>
  18.                 	<tr>
  19.                     	<td>new item</td>
  20.                        	<td>new item</td>
  21.                         <td>new item</td>
  22.                     </tr>
  23.                     {tu wyciąłem kod dla lepszej czytelności, by lepiej zobrazować, o co mi chodzi}
  24.                     <tr>
  25.                        	<td>new item</td>
  26.                        	<td>new item</td>
  27.                         <td>new item</td>
  28.                     </tr> 
  29.                 </table>  
  30.             </div>
  31. 		</article>
  32. 		<footer>
  33. 			stopka
  34. 		</footer>
  35. 	</body>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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


CSS
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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?
viking
5.04.2019, 06:28:36
Masz pelno przykładów https://stackoverflow.com/questions/1706729...ll-inside-tbody
Baku12345
8.04.2019, 04:17:02
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ę?
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.