表格使用其父元素宽度超过100％的宽度，仅CSS才能解决此问题？

Question

我有一个使用100％宽度的root div，并且我希望所有子项都不要重叠（overflow:hidden），也不要使用超过此100％的宽度。

当我使用内部<div>s时，此方法很好用，但如果使用<table>s，则表变得太宽，使用的父级多于100％div。

在保持table？的同时如何解决？

这是JSFiddle。

屏幕截图：

Answer 1

您应该给出word-break: break-word;td文本，因为文本长度很大，或者您可以给出td文本word-break: break-all;来破坏文本。

更新的CSS代码

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

演示提琴：https : //jsfiddle.net/nikhilvkd/kLt1mec8/3/

Answer 2

如果您添加以下样式，它应该可以解决您的问题：

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

更新的代码：

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

#wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
#item {
  padding: 10px;
  border-style: solid;
  border-color: #ff0000;
  border-width: 1px;
  overflow: hidden;
}
#wrapper table {
  width: 100%;
  border-style: solid;
  border-color: #ff0000;
  border-width: 1px;
  table-layout: fixed;
}
#wrapper table td {
  overflow: auto;
}
#wrapper table td:nth-child(1) {
  width: 10%;
}
#wrapper table td:nth-child(2) {
  width: 90%;
}