Tabelle überschreitet DIV

[musclebreast]

HI,

ich habe ein DIV mit folgenden Settings:

#Filterbox {
 width: 60%;      
 margin-left:auto;
 margin-right:auto;
 border-width:1px;
    border-style:solid;
    border-color:gray;
 background-Color:white;
 padding:10px 10px 10px 10px;
}

In diesem DIV ist eine Tabelle (ja es ist nicht state of the art).

<DIV id="Filterbox">

<h3 class="title">

  <span>Previous Comments</span>
 </h3>


<div>
<Table width="100%">



<!-- start new row -->



<TR>



<TD class="label">
Step Name

</TD>



<TD class="label">
Performer

</TD>


<TD class="label">
Date

</TD>



<TD class="label">
Comments

</TD>


</TR>


<!-- End new row -->


</Table>




</DIV>

Wenn der Inhalt einer Spalte zu gross ist, dann geht die Tabelle über mein DIV Element. Hast jemand einen Tipp wie ich es erzwingen kann, dass die Tabelle nicht über das DIV hinausgeht?

LG,

Lara

 

[SpiceLab]

Wenn der Inhalt einer Spalte zu gross ist, dann geht die Tabelle über mein DIV Element.

Weil es sich um eine Zeichenkette handelt, die keine Leerzeichen enthält, die Zeilenumbrüche ermöglichen würden.

https://jsfiddle.net/SpiceLab/xs7fjw1h/ -siehe die Spalte für Comments-

Hast jemand einen Tipp wie ich es erzwingen kann, dass die Tabelle nicht über das DIV hinausgeht?

• https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/text-overflow
  
• https://www.mediaevent.de/css/visualeffects-overflow.html

Übrigens fehlt offensichtlich in Deinem gezeigten HTML-Code ein schliessendes </div> zwischen </TABLE> und </DIV>.

 

[drumer]

Ich würde das die Tabelle positionieren!

top:???px;

 

[SpiceLab]

Ich würde das die Tabelle positionieren!

top:???px;

Wozu? Was versprichst Du Dir davon?

Positionsangaben, sei es absolute, relative, oder fixed, lösen nicht das angesprochene Problem: https://jsfiddle.net/SpiceLab/xs7fjw1h/