html - 表格信息使表格溢出到div之外

Question

#container {
    box-shadow: 10px 10px 5px #888888;
    /*bg transparent*/
    background-color: rgba(255, 255, 255, 0.4);
    max-width: 960px;
    /*centrat in pagina*/
    margin: 0 auto;
    /*distanta dintre border si continut*/
    padding-top: 15px;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 95vh;
    position: relative;
}

#header {
    background-color: #FFA500;
    position: relative;
    overflow: auto;
}

#menu {

    background-color: #FFD700;
    /*dimensiune*/
    width: 135px;
    /*pozitie*/
    float: left;
    text-align: center;
    /*margini fata de elemente*/
    margin-right: 5px;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#content {
    background-color: #EEEEEE;
    /*dimensiune*/
    min-height: 685px;
    width: 740px;
    /*pozitie*/
    position: relative;
    /*margini fata de elemente*/
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

Container 应有尽有。 Header 在 container 里面，在上面。在它下面，我有一个名为 cont 的 div，它没有关联的样式。在里面，左边是menu，右边是content。在 content 中，我有一个溢出 div 的表格。我怎样才能使该表适合 div？

这是我的应用程序的图片。 http://i.imgur.com/BVMlIEF.png?1

Jfiddle http://jsfiddle.net/5f9A4/

Answer 1

出现此问题是因为您添加了没有任何空格的长文本。添加以下 CSS。希望它能解决问题。

 #content table td
 {
  word-wrap:break-all;
 }

我已经在你的 fiddle 中重现了(类似于你的图片)这个问题。看看HERE

之后我添加了上面的解决方案来解决这个问题。检查Updated Solution HERE.