按内容自动增长table-cell元素

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

EDIT2

在左侧课程上放置宽度：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

Answer 2

您可以将HTML中包含左侧类的div更改为范围

<span class="left">
    <!-- no content, should not be displayed !-->
</span>

然后更改CSS，将显示从table-cell更改为inline-block

.left {
display:inline-block;
border:dashed 1px orange;
}

你也可以尝试这个...... FIDDLE Again