Tabela przelewająca się poza Div

Próbuję zatrzymać tabelę, która ma wyraźnie zadeklarowaną szerokość, aby nie przepełniała się poza jej rodzicem div. Zakładam, że mogę to zrobić w jakiś sposób używając max-width, ale nie mogę tego uruchomić.

Następujący kod (z bardzo małym okienkiem) spowoduje to: 

<style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

Czerwona linia jest prawą krawędzią div, a jeśli okno przeglądarki będzie małe, zobaczysz, że tabela nie pasuje do niego.

Author: Mowzer, 2010-02-14
Source

7 answers

Odwróć to wykonując: 

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

Również radzę ci:

  • nie używaj znacznika center (jest przestarzały)
  • nie używaj width, bgcolor atrybuty, ustaw je za pomocą CSS (width i background-color)

(zakładając, że możesz kontrolować tabelę, która została wyrenderowana)

 15
Author: Zyphrax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-05 09:39:43

Można zapobiec rozszerzaniu tabel poza ich nadrzędny div za pomocą table-layout:fixed.

Poniższy CSS spowoduje rozszerzenie tabel do szerokości div otaczającego je. 

table 
{
    table-layout:fixed;
    width:100%;
}

Znalazłem tę sztuczkę tutaj .

 159
Author: James Lawruk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-17 11:46:01

Surowa praca polega na ustawieniu display: table Na div.

 54
Author: questzen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-05 09:40:24

Próbowałem wszystkich rozwiązań wymienionych powyżej, a potem nie zadziałało. Mam 3 stoliki jeden pod drugim. Ostatnia nad przepłynęła. Naprawiłem używając: 

/* Grid Definition */
table {
    word-break: break-word;
}

Dla IE11 w trybie edge, musisz ustawić to na word-break:break-all

 16
Author: Mr. Doomsbuster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-01 22:57:35

Na początku stosowałem metodę Jamesa Lawruka. To jednak zmieniło wszystkie szerokości td ' s.

Rozwiązaniem dla mnie było użycie white-space: normal na kolumnach(które ustawiono na white-space: nowrap). W ten sposób tekst będzie zawsze łamany. Użycie word-wrap: break-word zapewni, że wszystko pęknie w razie potrzeby, nawet w połowie słowa.

CSS będzie wyglądał następująco: 

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

Może to nie zawsze być pożądane rozwiązanie, ponieważ word-wrap: break-word może sprawić, że twoje słowa w tabeli będą nieczytelne. Będzie zachowaj jednak odpowiednią szerokość stołu.

 10
Author: Sander Koedood,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-20 12:08:02

[1]} próbowałem prawie wszystkich powyższych, ale nie zadziałało dla mnie ... Następujące did 

word-break: break-all;

To zostanie dodane do nadrzędnego div (kontenera tabeli .)

 0
Author: Waheed Asghar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-21 15:11:30

Jest width="400" na stole, usuń go i będzie działać...

 -2
Author: dale,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-05 09:40:10