如何使表格适合父div [英] How to make table fit in parent div

问题描述

我有一个表，该表不应超过父div宽度的宽度，这只能在CSS中解决吗?我这里有一个例子

I have a table that should not exceed the width of the parent div's width, how can this be solved in CSS only? I have an example here

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;    
}

推荐答案

尝试一下:

#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;    
}

这篇关于如何使表格适合父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！