Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Coś schrzaniłem w CSS
Forum PHP.pl > Forum > Przedszkole
tomkot1992
3.10.2019, 19:45:58
Cześć Panowie i Panie,

czy może ktoś mi z was pomóc znaleźć gdzie coś schrzaniłem prawdopodobnie w CSS...
Zabrałem się dzisiaj za zmianę "szaty graficznej" tabeli, no i niestety coś źle zrobiłem, że teraz dłuższy tekst w tabeli nie "łamie się" tylko jest w jednej ciągłej liny...
nie wiem za bardzo gdzie zrobiłem błąd.. testowałem już chyba wszystkie możliwości, może ktoś z większym doświadczeniem się z tym spotkał i wytyknie mi gdzie popełniłem błąd.
Dołączam zdjęcie jak to wygląda, przed modyfikacjami tabela dostosowywała się do szerokości przeglądarki, tekst się automatycznie załamywał tak aby cała tabela się mieściła w oknie.
Kombinuje już od kilku dobrych godzin i nie widzę nigdzie przyczyny...

Link do obrazka:
https://zapodaj.net/3692ea8d67d5b.png.html




Poniżej css i php.

[PHP] pobierz, plaintext 
  1. @font-face {
  2.   font-family: Poppins-Regular;
  3.   src: url("fonts/poppins/Poppins-Regular.ttf"); 
  4. }
  5.  
  6. @font-face {
  7.   font-family: Poppins-Bold;
  8.   src: url("fonts/poppins/Poppins-Bold.ttf"); 
  9. }
  10. body
  11. {
  12. 	background-image: url("img/background.png");
  13. 	font-size: 10px;
  14. }
  15.  
  16. #container1
  17. {
  18. 		background-color: white;
  19. 		width: auto;
  20. 		padding: 50px;
  21. 		margin-left: 5px;
  22. 		margin-right: 5px;
  23. 		margin-top: 50px;
  24. 		-webkit-box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
  25. 		-moz-box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
  26. 		box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);	
  27. }
  28.  
  29. h3
  30. {
  31. 	width: auto;
  32. 	background-color: #efefef;
  33. 	font-family: Poppins-Regular;
  34. 	color: #808080;
  35. 	border: 2px solid #ddd;
  36. 	border-radius: 5px;
  37. 	font-size: 18px;
  38. 	padding: 10px;
  39. 	box-sizing: border-box;
  40. 	margin-top: 10px;
  41. }
  42.  
  43. textarea
  44. {
  45. 	width: 600px;
  46. 	background-color: #efefef;
  47. 	color: #666;
  48. 	border: 2px solid #ddd;
  49. 	border-radius: 5px;
  50. 	font-size: 20px;
  51. 	padding: 10px;
  52. 	box-sizing: border-box;
  53. 	margin-top: 10px;
  54. }
  55.  
  56.  
  57. td
  58. {
  59. 	width: 10px;
  60. 	height: auto;
  61. 	background-color: white;
  62. 	border: 1px #ddd;
  63. 	border-radius: 0px;
  64. 	font-size: 16px;
  65. 	padding: 5px;
  66. 	margin-top: 10px;
  67. 	font-family: Poppins-Regular;
  68.     color: #808080;
  69.     line-height: 1.2;
  70.     text-transform: uppercase;
  71.     font-weight: unset !important;
  72.     margin-bottom: 10px;
  73. 	text-align: center;
  74. 	text-overflow: scroll;
  75.  
  76. }
  77.  
  78. td:hover 
  79. {
  80. 	background-color: #f5f5f5;
  81. 	-webkit-transition-duration: 0.9s; 
  82. 	transition-duration: 0.9s;
  83. }
  84.  
  85. table
  86. {
  87.  
  88. 	width: 100%;
  89. 	height: 100%;
  90. 	background-color: white;
  91. 	color: #666;
  92. 	border: 5px solid #ddd;
  93. 	border-radius: 5px;
  94. 	font-size: 14px;
  95. 	padding: 10px;
  96. 	margin-top: 10px;
  97. 	text-overflow: scroll;
  98.  
  99. }
  100.  
  101. button
  102. {
  103.  
  104. 	width: 300px;
  105. 	background-color: #DC143C;
  106. 	font-size: 20px;
  107. 	color: white;
  108. 	padding: 15px 10px;
  109. 	margin-top: 10px;
  110. 	border: none;
  111. 	border-radius: 5px;
  112. 	cursor: pointer;
  113. 	letter-spacing: 2px;
  114. 	margin-top: 30px;
  115. }
  116.  
  117. .topnav {
  118.   background-color: #333;
  119.   overflow: hidden;
  120.   font-family: Poppins-Regular;
  121. }
  122.  
  123. .topnav a {
  124.    float: left;
  125.   color: #f2f2f2;
  126.   text-align: center;
  127.   padding: 14px 16px;
  128.   text-decoration: none;
  129.   font-size: 20px;
  130.   -webkit-transition-duration: 0.9s; 
  131. 	transition-duration: 0.5s;
  132. }
  133.  
  134. .topnav a:hover {
  135.   background-color: #ddd;
  136.   color: black;
  137. }
  138.  
  139. .topnav a.active {
  140.   background-color: #6c7ae0;
  141.   color: white;
  142. }
  143.  
  144. td.inna_td
  145. {
  146. 	width: auto;
  147. 	height: 30px;
  148. 	background-color: #efefef;
  149. 	color: #666;
  150. 	border: 3px solid #b1b1b1;
  151. 	border-radius: 5px;
  152. 	font-size: 14px;
  153. 	padding: 10px;
  154. 	margin-top: 10px;
  155. 	text-overflow: scroll;
  156.  
  157. }
  158.  
  159. .przyp-btn-success
  160. {
  161. 	width: 100px;
  162. 	background-color: #1E90FF;
  163. 	font-family: Poppins-Regular;
  164. 	font-size: 10px;
  165. 	color: white;
  166. 	padding: 7px 7px;
  167. 	margin-top: 0px;
  168. 	border: none;
  169. 	border-radius: 3px;
  170. 	cursor: pointer;
  171. 	letter-spacing: 2px;
  172. 	margin-top: auto;
  173. 	-webkit-transition-duration: 0.9s; 
  174. 	transition-duration: 0.9s;
  175. }
  176.  
  177. .przyp-btn-success:hover
  178. {
  179. 	background-color: #DC143C;
  180. 	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  181. }
  182.  
  183. .edit-btn-success
  184. {
  185. 	width: 100px;
  186. 	background-color: #1E90FF;
  187. 	font-family: Poppins-Regular;
  188. 	font-size: 10px;
  189. 	color: white;
  190. 	padding: 7px 7px;
  191. 	margin-top: 0px;
  192. 	border: none;
  193. 	border-radius: 3px;
  194. 	cursor: pointer;
  195. 	letter-spacing: 2px;
  196. 	margin-top: auto;
  197. 	-webkit-transition-duration: 0.9s; 
  198. 	transition-duration: 0.9s;
  199. }
  200.  
  201. 	.edit-btn-success:hover
  202. {
  203. 	background-color: #DC143C;
  204. 	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  205. }
  206.  
  207.  
  208. .status-btn-success
  209. {
  210. 	width: 100px;
  211. 	background-color: #1E90FF;
  212. 	font-family: Poppins-Regular;
  213. 	font-size: 10px;
  214. 	color: white;
  215. 	padding: 7px 7px;
  216. 	margin-top: 0px;
  217. 	border: none;
  218. 	border-radius: 3px;
  219. 	cursor: pointer;
  220. 	letter-spacing: 2px;
  221. 	margin-top: auto;
  222. 	-webkit-transition-duration: 0.9s; 
  223. 	transition-duration: 0.9s;
  224. }
  225.  
  226. .status-btn-success:hover
  227. {
  228. 	background-color: #DC143C;
  229. 	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  230. }
  231.  
  232. th
  233. {
  234. 	color: #ffffff;
  235. 	background: #6c7ae0;
  236. 	display: table-cell;
  237. 	font-family: Poppins-Regular;
  238. 	font-size: 16px;
  239. 	line-height: 1.2;
  240. 	font-weight: unset !important;
  241. 	padding-top: 19px;
  242. 	padding-bottom: 19px;
  243. 	border-radius: 5px; 
  244. 	text-overflow: scroll;
  245.  
  246. }
  247.  
  248. th:hover
  249. {
  250. 	background-color: #4b5499;
  251. 	-webkit-transition-duration: 0.9s; 
  252. 	transition-duration: 0.9s;
  253. }
  254.  
  255.  
  256. label
  257. {
  258. 	background: #6c7ae0;
  259. }
  260.  
[PHP] pobierz, plaintext



No i kodzik programu, trochę okrojony ale zachowałem najważniejsze części

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. 	<html lang="pl">
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1" />
  6. 		<link rel="stylesheet" href="style.css">
  7. 	</head>
  8.  
  9. <body>
  10. <div id="container1">
  11. <div class="topnav">
  12. <a class="active" href="hd.php">Otwarte zgłoszenia</a>
  13. <a href="hd_rozwiazane.php">Rozwiązane zgłoszenia</a>
  14. </div>
  15. 	<table>
  16. 	<tr>
  17. 	<th>ID</th>
  18. 	<th>Imię</th>
  19. 	<th>Nazwisko</th>
  20. 	<th>Oddział</th>
  21. 	<th>Numer wew</th>
  22. 	<th>Numer pok</th>
  23. 	<th>Adres e-mail</th>
  24. 	<th>Treść zgłoszenia</th>
  25. 	<th>Data zgłoszenia</th>
  26. 	<th>Przypisana osoba</th>
  27. 	<th>Opis rozwiązania</th>
  28. 	<th>Status</th>
  29. 	<th>Działanie</th>
  30. 	</tr>
  31.  
  32. 	......
  33.  
  34. 	<tr>
  35.  
  36. 	<td><?php echo $row['id']; ?></td>
  37. 	<td><?php echo $row['imie']; ?></td>
  38. 	<td><?php echo $row['nazwisko']; ?></td>
  39. 	<td><?php echo $row['wydzial']; ?></td>
  40. 	<td><?php echo $row['numer_wew']; ?></td>
  41. 	<td><?php echo $row['numer_pok']; ?></td>
  42. 	<td><?php echo $row['e_mail']; ?></td>
  43. 	<td><?php echo $row['opis']; ?></td>
  44. 	<td><?php echo $row['data_dodania']; ?></td>
  45. 	<td><?php echo $row['przyp_osoba']; ?>	
  46. 		<form action="edit_person.php" method="post">
  47. 		<input type="hidden" name="edit_id" value="<?php echo $row['id']; ?>">
  48. 		<button type="submit" name="przyp_btn" class="przyp-btn-success"> Przypisz</button>
  49. 		</form>
  50. 	</td>
  51. 	<td><?php echo $row['opis_czynnosci']; ?>
  52. 			<form action="edit.php" method="post">
  53. 			<input type="hidden" name="edit_id" value="<?php echo $row['id']; ?>">
  54. 			<button type="submit" name="edit_btn" class="edit-btn-success"> Edytuj</button>
  55. 			</form>
  56. 	</td>
  57. 	<td><?php echo $row['status']; ?></td>
  58. 	<td>
  59. 		<form action="edit_status.php" method="post">
  60. 		<input type="hidden" name="edit_id" value="<?php echo $row['id']; ?>">
  61. 		<button type="submit" name="status_btn" class="status-btn-success"> Rozwiązane</button>
  62. 		</form>
  63. 	</td>
  64. 	</tr>
  65. 	</table>
  66.  
  67.  
  68. </div>
  69. </body>
  70. </html>
  71.  
[PHP] pobierz, plaintext


emillo91
6.10.2019, 20:13:06
Co do przełamania tekstu to chyba źle używasz instrukcji text-overflow przez co tekst się nie formatuje:
https://css-tricks.com/almanac/properties/t/text-overflow/

Jeżeli chciałbyś wyświetlić całą zawartość tekstową to możesz też użyć właściwości word-break:
https://www.w3schools.com/cssref/tryit.asp?...css3_word-break
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.