Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Przeglądanie danych tabeli z użyciem suwaka
Baku12345
post
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
(IMG:https://naforum.zapodaj.net/thumbs/216a2256b960.png)
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 (IMG:style_emoticons/default/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

Ten post edytował Baku12345 29.03.2019, 04:31:19
Go to the top of the page
+Quote Post

Posty w temacie
- Baku12345   [HTML][CSS] Przeglądanie danych tabeli z użyciem suwaka   29.03.2019, 04:30:29
- - dublinka   [HTML] pobierz, plaintext  <table cellspac...   29.03.2019, 05:51:58
- - Baku12345   To jeszcze raz ja. Udało mi się uzyskać taki efekt...   5.04.2019, 04:22:55
- - viking   Masz pelno przykładów https://stackoverflow.com/qu...   5.04.2019, 06:28:36
- - Baku12345   Kurcze Panowie, dalej mam z tym problem Zrobiłem ...   8.04.2019, 04:17:02

« Następny starszy · Przedszkole · 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: 23.08.2025 - 12:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn