子 div 不遵循带有 display:table 的父级宽度答案

【问题标题】：Child div doesn't follow the width of parent with display:table子 div 不遵循带有 display:table 的父级宽度
【发布时间】：2015-04-19 08:18:10
【问题描述】：

我尝试重新创建一个 CSS 设计来学习如何使用该样式：display:table。但是，我有一个无法解决的问题。子 div 不跟随父 div 的宽度。

由于代码很多，我创建了一个 JSFiddle。

pricetable 类遵循窗口的宽度，但 priceTableMain 没有。我尝试将宽度从 100% 更改为自动，但没有解决。

这里是JSFiddle

【问题讨论】：

六层嵌套div，你的标记结构确实有问题...
是的，我不明白你想要做什么，定价表看起来不错。 Alien先生有一点，你有很多嵌套的div，这段代码可以简化。试试这个工具来帮助你创建一个好的表和一个好的代码：coveloping.com/tools/pricing-tables
如果问题是表格单元格的宽度不能小于大约 112 像素，那是对的，因为它们的内容太宽了。你想怎么解决？您想隐藏某些内容吗？您可以通过在 15€/player 事物中添加空格来稍微缩小范围，这将允许它们自动换行，但仅此而已。

标签： html css

【解决方案1】：

我知道你的问题。您的标记不好，但您正在添加 width: 100%; 您还需要放置table-layout: fixed;

.priceTableMain {
  display: table;
  table-layout: fixed;
  width: 100%;
}

【讨论】：