如何使表适合父div

Question

我有一个表不应超过父div宽度的宽度，如何才能在CSS中解决这个问题？我在这里有一个例子

JSFiddle

HTML

<div id="parent">
    <table id="child2">
        <tr>
            <td>Hi! andgds;lfgjl;dksfjglkdfgjldsfk;gjdlf;kgjdlfkgjdflkgjdl;fksgjdl;ksfgjlkdfsjglkdfsjglkdsfjglkdjsfgkljdsflkgjdflksgjl;kdsfd it's not working!</td>
            <td>Hi! andgds;lfgjl;dksfjglkdfgjldsfk;gjdlf;kgjdlfkgjdflkgjdl;fksgjdl;ksfgjlkdfsjglkdfsjglkdsfjglkdjsfgkljdsflkgjdflksgjl;kdsfd it's not working!</td>            
        </tr>
    </table>

CSS

#parent {
    border: 3px solid #f0f;
    width: 600px;       
}
table#child2 {    
    background: cyan;        
}
td{
    border: 2px solid #666;    
}

Answer 1

试试这个：

#parent {
    border: 3px solid #f0f;
    width: 600px;       
}
table#child2 {    
    background: cyan; 
    table-layout:fixed;
    width: 100%;       
}
table#child2 td {
    white-space: normal;
    word-wrap: break-word;
}
td{
    border: 2px solid #666;    
}