Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Tabelka wypływa za diva
Forum PHP.pl > Forum > Przedszkole
Baku12345
30.10.2017, 02:34:53
Witam
Mam taki problem, stworzyłem taki mini panel administracyjny dla strony, za pośrednictwem, którego mógłbym dodawać, usuwać i edytować dane, jednak podczas wyświetlania tych danych tabela wypływa mi poza obszar diva. Dla lepszej widoczności pokolorowałem poszczególne elementy strony by było wiadomo o co mi chodzi. A wygląda to tak
https://zapodaj.net/63ab600d00792.png.html

Chciałbym, by było tak, że jak tekst się nie mieści w komórce, to żeby był zawijany i żeby komórka powiększała się w dół utrzymując tabelę na szerokość w granicach diva. O tak
https://zapodaj.net/747c77ece4b2d.png.html

Proszę pomoc w dojściu do tego, co jest źle w html-u lub css-ie, że ten tekst się sam nie dzieli tylko tabela zaczyna wypływać.
Struktura jest bardzo prosta, żółty kontener, w nim czerwony obszar po lewej (nawigacja), a po prawej zielony z pomarańczową tabelą wewnątrz. Chcę by utrzymywała się ona w obrębie tego zielonego diva, marginesów i paddingów.

Dodam jeszcze, że dane do tabeli ładowane są z bazy danych i czasem są długie i mają się zawijać jak się nie mieszczą

A oto skrócony kod HTML i CSS

HTML
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2.  
  3. <html>
  4.     <head>
  5.         <meta charset='utf-8'>
  6.         <link rel="stylesheet" type="text/css" href="css/style.css">
  7.     </head>
  8.  
  9.     <body>
  10.         <div id='container'>
  11.             <div id='nav'>
  12.                 <a href='admin.php?action=show_categories'>Kategorie</a>
  13.                 <a href='admin.php?action=show_canals'>Kanaly</a>
  14.                 <a href='admin.php?action=show_search'>Wyszukiwarka</a>
  15.                 <a href='admin.php?action=other_links'>Inne strony</a>
  16.                 <a href='admin.php?action=logout'>Wyloguj</a>
  17. 			</div>
  18.  
  19.             <div id='content'>
  20.                 <h2>Kanaly</h2>
  21.                 <form action="admin.php?action=add_canal" method="post">
  22.                     Zdjecie <input type="text" name="image" size="5">
  23.                     Nazwa kanalu <input type="text" name="name" size="5">
  24.                     Kategoria
  25.                     <select name="category_id">
  26.                         <option value=6>Ogólne</option>
  27.                         <option value=7>Filmowe</option>
  28.                         <option value=8>Informacyjne</option>
  29.                         <option value=9>Lokalne</option>
  30.                         <option value=10>Sportowe</option>
  31.                         <option value=11>Rozrywkowe i Muzyczne</option>
  32.                         <option value=13>Dla Dzieci</option>
  33.                         <option value=14>Lifestylowe</option>
  34.                         <option value=15>Religijne</option>
  35.                         <option value=16>Edukacyjne i Dokumentalne</option>
  36.                         <option value=17>Dla Doroslych</option>
  37.                         <option value=18>Tematyczne</option>
  38.                         <option value=30>Radio</option>
  39.                     </select>
  40.                     <input type="submit" value="Dodaj kanal">
  41.                 </form>
  42.                 <table>
  43.                     <tr><td>1</td><td>13ulicaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td>13 Ulica</td><td>Filmowe</td><td><a href='admin.php?action=show_urls&id=150'>Pokaz linki</a></td><td><a href='admin.php?action=edit_canal&id=150'>Edytuj</a></td><td><a href='admin.php?action=delete_canal&id=150'>Usun</a></td></tr>
  44.                     <tr><td>2</td><td>4fundance</td><td>4FUN Dance</td><td>Rozrywkowe i Muzyczne</td><td><a href='admin.php?action=show_urls&id=26'>Pokaz linki</a></td><td><a href='admin.php?action=edit_canal&id=26'>Edytuj</a></td><td><a href='admin.php?action=delete_canal&id=26'>Usun</a></td></tr>
  45.                     <tr><td>3</td><td>4fungoldhits</td><td>4FUN Gold Hits</td><td>Rozrywkowe i Muzyczne</td><td><a href='admin.php?action=show_urls&id=25'>Pokaz linki</a></td><td><a href='admin.php?action=edit_canal&id=25'>Edytuj</a></td><td><a href='admin.php?action=delete_canal&id=25'>Usun</a></td></tr>
  46.                 </table>
  47.             </div>
  48.         </div>
  49.     </body>
  50. </html>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1. html {
  2.     overflow: scroll;
  3.     background: #fff;
  4. }
  5.  
  6. body {
  7.     width: 960px;
  8.     margin: 0 auto;
  9. }
  10.  
  11. a {
  12.     text-decoration: none;
  13. }
  14.  
  15. #container {
  16.     width: 960px;
  17.     float: left;
  18.     background: yellow;
  19. }
  20.  
  21. #nav {
  22.     width: 245px;
  23.     padding: 7px 25px;
  24.     float: left;
  25.     background: red;
  26. }
  27.  
  28. #nav a {
  29.     display: block;
  30.     padding: 7px;
  31.     font-size: 20px;
  32. }
  33.  
  34. #content {
  35.     width: 615px;
  36.     padding: 7px 25px;
  37.     float: left;
  38.     background: green;
  39. }
  40.  
  41. table {
  42.     margin: 25px 0;
  43.     border: 1px solid blue;
  44.     border-collapse: collapse;
  45.     background: orange;
  46. }
  47.  
  48. table tr td {
  49.     padding: 12px;
  50.     font-size: 16px;
  51.     border: 1px solid blue;
  52. }
[HTML] pobierz, plaintext


Z góry dzięki za pomoc
viking
30.10.2017, 07:13:37
Dla td: word-break: break-all;
Baku12345
30.10.2017, 21:53:04
Dzięki wielkie, Działa smile.gif
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.