Невозможно сохранить ширину затруднительного столбца таблицы с 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@gmail.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds 
 
      sadddddddddddddddddddddddddd 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

У меня есть простая таблица с починкой width.I также имеет ширину починки для столбцов в ней делать, что я использовал CSS COLGROUP.

Задача 1:

Ширина моих колонок, если я проверить в инструмент разработчика отличается, чем то, что я дал в COLGROUP.

Что я попробовал

При закреплении его я обнаружил, что ширина изменяется с текстом в нем, если я увеличить текст TD увеличивается, и наоборот.

Задача 2:

Когда я ввести текст в тд, если я не не разорвать его на новую строку, нажав ввести ширину TD продолжает увеличиваться с текстом.

Что я попробовал

Для решения этой проблемы я есть обернуть текст в теге ар с шириной починки, а затем положить его в тд, но до сих пор нет luck.What я вижу не ширина становится применяется к P тег, но текст переполнен.

Что я ожидаю:

Я хотел бы знать, что, почему текст не нарушает себя на новой линии после того, как фиксированная ширина td.Why текста перетекает из P, даже после того, как затруднительное width.Why тд имеет для увеличения даже после фиксированной ширины.

Я не знаю, чего мне не хватает, чтобы подать заявку здесь.

Answer 1

для использования таблицы CSS собственности

table-layout: fixed; 

Затем обеспечивают фиксированный с вашим TD колоннами.

Answer 2

Ширина метки <p> и <td> фиксированы, они не увеличиваются.

Пока в вашем текстовом содержимом не будет места, оно не будет перенесено на следующую строку. Вы должны использовать многоточие, которое будет помещаться ... вместо переполнения текстового содержимого. Используйте ниже css для вашего тега <p>.

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