Html 表使用的宽度超过父元素的100%，如何仅通过CSS修复？

我有一个使用100%宽度的根div，我希望所有子级不要重叠（

overflow:hidden

），也不要使用比这100%更大的宽度

当我使用内部

s时，这可以很好地工作，但是如果使用

s，则表会变得太宽，使用了超过父级100%的

div

如何在保留

表的同时解决此问题

这是

屏幕截图：

你应该给
断字：断字
用于td文本，因为文本长度较大，或者您可以将td文本设置为
单词break:break all用于断开文本

更新的css代码

#wrapper table td{
  word-break: break-word;
}

演示小提琴：
您可以添加
单词break:break all
添加到您的
td
如果您添加以下样式，它将解决您的问题：

#wrapper table {
  table-layout:fixed;
}
#wrapper table td {
  overflow:auto; /* can be hidden if you want to hide it */
}

更新代码：


#包装器{
宽度：100%；
框大小：边框框；
填充：20px；
}
#项目{
填充：10px；
边框样式：实心；
边框颜色：#ff0000；
边框宽度：1px；
溢出：隐藏；
}
#包装表{
宽度：100%；
边框样式：实心；
边框颜色：#ff0000；
边框宽度：1px；
表布局：固定；
}
#包装表td{
溢出：自动；
}
#包装器表td:n个子项（1）{
宽度：10%；
}
#包装器表td:n个子项（2）{
宽度：90%；
}

这是一个正常的文本框，可以正确保留宽度。
这个div包含一个很长的单词，例如。https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg 并且宽度不能正确使用超过parnet宽度的100%。
可乐
Col2 mit viel文本https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg 宽度太宽了！如何使此DIV不大于父级？
只需添加css#wrapper>div{margin:10px 0；}即可将
id=“item”
和
#item
更改为
class=“item”
和
。item
不能对多个元素使用
id
。