无法使用CSS colgroup保持表格列宽固定

Question

 p { width: 40px; margin: 0; padding: 0; } td { padding: 0; margin: 0; } 

 <table style="width:100px;"> <colgroup> <col style="width:20px;"> <col style="width:40px;"> <col style="width:40px;"> </colgroup> <tr> <th>ID</th> <th>NAME</th> <th>Email</th> </tr> <tbody> <tr> <td>1</td> <td>john</td> <td> <p>johntheman@example.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds sadddddddddddddddddddddddddd </p> </td> </tr> </tbody> </table> 

I have simple table with fix width. I also have fix width for columns in it to do that I have used CSS colgroup.

Problem 1:

Width of my columns if I check in developer's tool is different than that of what I have given in colgroup.

What I have tried

While fixing it I have found that the width changes with the text in it if I increase the text td increases and vice versa.

Problem 2:

When I enter the text in td unless I don't break it on new line by hitting enter the width of td goes on increasing with text.

What I have tried

To tackle this problem I have wrap my text in ap tag with fix width and then put it in td but still no luck. What I see is width is getting applied to P tag but text is overflowing.

What I expect :

I would like to know that why text is not breaking itself on new line after the fixed width of td. Why text overflows out of P even after fix width? Why td has to increase even after fix width?

I don't know what I am missing to apply here.

Answer 1

for the table use css property

table-layout: fixed;

Then provide fixed with to your td columns.

Answer 2

The width of the <p> tag and <td> are fixed they are not increasing.

Until there is no space in your text content it will not wrap to next line. You have to use ellipsis which will put ... in place of overflowing text content. Use below css for your <p> tag.

p {
    width: 40px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;       
}