html - 按内容自动增长表格单元格元素

Question

我正在尝试使用 display:table-cell 和 display:table css 属性创建一个表格。它看起来像这样:

我的问题是橙色表格单元格需要与其内部内容一样大。有时绿色框是 100px，有时是 200px。 .left 应该自动增长。我想要一个 CSS 解决方案来解决这个问题。这可能吗？

它应该是这样的:

Here's the JSFiddle .这是代码:

HTML:

<div class="wrapper">
    <div class="left">
        <div class="tree">A
            <br/>- B
            <br/>- C
            <br/>
        </div>
        <div class="filter">F
            <br/>F2
            <br/>
        </div>
    </div>
    <div class="content">A A A
        <br/>B B B
        <br/>C C C
        <br/>
    </div>
    <div class="right">S
        <br/>S2
        <br/>
    </div>
</div>

CSS:

div {
    margin:2px;
    padding:2px;
}
.wrapper {
    width:700px;
    border:solid 1px red;
    display:table;
    table-layout:fixed;
}
.right {
    display:table-cell;
    border:solid 1px blue;
    width:100px;
}
.left {
    display:table-cell;
    border:dashed 1px orange;
}
.content {
    display:table-cell;
}
.tree, .filter {
    display:block;
    width:100px;
    border:solid 1px green;
}

.left 播放效果不佳 :(

Answer 1

编辑2

将 width: 100px 放在左边的类中，并从包装类中删除 table-layout:fixed;

FIDDLE

编辑

在你的标记中删除 .left 类中的空格，当它为空时，如下所示:

<div class="left"></div> or also like:

<div class="left"><!-- some comment is also ok--></div>

这是必要的，否则 :empty 选择器不会认为该元素为空。

在css中添加:

.left:empty
{
    display:none;
}

新 FIDDLE

---

如何将 .left 类的内容包装在另一个 div 中 - 像这样:

<div class="left">
   <div class="inner"></div>
</div>

然后，如果您愿意，可以在 .inner 没有内容的情况下删除边框 - 如下所示:

.inner:empty
{
    border:none;
}

FIDDLE