Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Responsywna tabela
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kubax33
23.08.2014, 10:44:25
Mam taką responsywną tabelę wszytko ładnie działa jednak problem pojawia się kiedy chcę ją użyć dla innych stron gdzie są inne nazwy "<th></th>". Chciałbym, aby w jednej tabeli było<th>Login</th> a w całkiem innej <th>Nazwisko</th>. Czy może tutaj trzeba użyć jakieś osobnego class do tabeli z td:nth-of-type(1):before ? Nie chciałbym tworzyć np. #tab_res2 bo to bez sensu. Jak to ugryźć?

[HTML] pobierz, plaintext 
  1.  
  2. #tab_res table { 
  3. 	width: 100%; 
  4. 	text-align: center;
  5. 	margin-top: 20px;
  6. }
  7. #tab_res thead tr { 
  8. 	background: #fff;
  9. }
  10. #tab_res td, th {
  11. 	padding: 3px;
  12. }
  13.  
  14. @media only screen and (max-width: 692px),(min-device-width: 768px) and (max-device-width: 1024px)  {
  15.  
  16. #tab_res .akcje {
  17. 	background: #ccc;
  18. 	color: #ccc;
  19. }
  20.  
  21. #tab_res table, thead, tbody, th, td, tr { 
  22. 	display: block; 
  23. }
  24. #tab_res thead tr { 
  25. 	position: absolute;
  26. 	top: -9999px;
  27. 	left: -9999px;
  28. }
  29.  
  30. #tab_res tr { 
  31. 	border: 1px solid #ccc; 
  32. }
  33.  
  34. #tab_res td { 
  35. 	border: none;
  36. 	border-bottom: 1px solid #e8e8e8; 
  37. 	position: relative;
  38. 	padding-left: 50%; 
  39. 	background: #fff;
  40. }
  41.  
  42. #tab_res td:before { 
  43. 	position: absolute;
  44. 	top: 6px;
  45. 	left: 6px;
  46. 	width: 45%; 
  47. 	padding-right: 10px; 
  48. 	white-space: nowrap;
  49. }
  50.  
  51. #tab_res td:nth-of-type(1):before { content: "Login"; line-height: 8px;}
  52. #tab_res td:nth-of-type(2):before { content: "Imię"; line-height: 8px;}
  53. #tab_res td:nth-of-type(3):before { content: "Miejcowość"; line-height: 8px;}
  54. #tab_res td:nth-of-type(4):before { content: "Kod pocztowy"; line-height: 8px;}
  55.  
  56. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id='tab_res'> 
  2. <table>
  3. 	<thead>
  4. 	<tr>
  5. 		<th>Login</th>
  6. 		<th>Imię</th>
  7. 		<th>Miejcowość</th>
  8. 		<th>Kod pocztowy</th>
  9. 	</tr>
  10. 	</thead>
  11.  
  12. <tbody>
  13. 	<td>xxx</td>
  14. 	 <td>xxx</td>
  15. 	<td>xxx</b></td>
  16. 	<td>xxx</td>
  17. </tbody>
  18.  
  19. </table>
  20.  
  21. </div>
[HTML] pobierz, plaintext
aniolekx
23.08.2014, 12:10:11
polecam http://getbootstrap.com/, może ci się spodoba smile.gif
kubax33
23.08.2014, 15:40:46
Rozwiązałem to kolejnym divem innego wyjścia nie widzę choć zapewne idzie to zrobić lepiej.

[HTML] pobierz, plaintext 
  1.  
  2. #tab_res table { 
  3. 	width: 100%; 
  4. 	text-align: center;
  5. 	margin-top: 20px;
  6. }
  7. #tab_res thead tr { 
  8. 	background: #fff;
  9. }
  10. #tab_res td, th {
  11. 	padding: 3px;
  12. }
  13.  
  14. @media only screen and (max-width: 692px),(min-device-width: 768px) and (max-device-width: 1024px)  {
  15.  
  16. #tab_res .akcje {
  17. 	background: #ccc;
  18. 	color: #ccc;
  19. }
  20.  
  21. #tab_res table, thead, tbody, th, td, tr { 
  22. 	display: block; 
  23. }
  24. #tab_res thead tr { 
  25. 	position: absolute;
  26. 	top: -9999px;
  27. 	left: -9999px;
  28. }
  29.  
  30. #tab_res tr { 
  31. 	border: 1px solid #ccc; 
  32. }
  33.  
  34. #tab_res td { 
  35. 	border: none;
  36. 	border-bottom: 1px solid #e8e8e8; 
  37. 	position: relative;
  38. 	padding-left: 50%; 
  39. 	background: #fff;
  40. }
  41.  
  42. #tab_res td:before { 
  43. 	position: absolute;
  44. 	top: 6px;
  45. 	left: 6px;
  46. 	width: 45%; 
  47. 	padding-right: 10px; 
  48. 	white-space: nowrap;
  49. }
  50.  
  51. #tab_res td:nth-of-type(1):before { content: "Login"; line-height: 8px;}
  52. #tab_res td:nth-of-type(2):before { content: "Imię"; line-height: 8px;}
  53. #tab_res td:nth-of-type(3):before { content: "Miejcowość"; line-height: 8px;}
  54. #tab_res td:nth-of-type(4):before { content: "Kod pocztowy"; line-height: 8px;}
  55.  
  56. }
  57.  
  58.  
  59. @media only screen and (max-width: 692px),(min-device-width: 768px) and (max-device-width: 1024px)  
  60. {
  61.  
  62. #tab_res_2  td:nth-of-type(1):before { content: ""; }
  63. #tab_res_2  td:nth-of-type(2):before { content: "Login2"; line-height: 8px;}
  64. #tab_res_2  td:nth-of-type(3):before { content: "Imię2"; line-height: 8px;}
  65. #tab_res_2  td:nth-of-type(4):before { content: "Nazwisko2"; line-height: 8px;}
  66. #tab_res_2  td:nth-of-type(5):before { content: "Stanowisko2"; line-height: 8px;}
  67.  
  68. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id='tab_res'> <div id='tab_res_2'> 
  2. <table>
  3. 	<thead>
  4. 	<tr>
  5. 		<th>Login</th>
  6. 		<th>Imię</th>
  7. 		<th>Miejcowość</th>
  8. 		<th>Kod pocztowy</th>
  9. 	</tr>
  10. 	</thead>
  11.  
  12. <tbody>
  13. 	<td>xxx</td>
  14. 	 <td>xxx</td>
  15. 	<td>xxx</b></td>
  16. 	<td>xxx</td>
  17. </tbody>
  18.  
  19. </table>
  20.  
  21. </div></div>
[HTML] pobierz, plaintext
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.