1

我正在尝试使用display:table-cell和display:tablecss 属性制作一个表格。它看起来像这样：

表格示例

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

它应该如下所示：

应该是这样的

这是 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不好:(

4

2 回答 2

1

编辑2

将宽度：100px 放在左侧类上并table-layout:fixed;从包装类中删除

小提琴

编辑

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

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

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

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

在 css 中添加：

.left:empty
{
    display:none;
}

新小提琴

如何将 .left 类的内容包装在另一个 div 中 - 如下所示：

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

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

.inner:empty
{
    border:none;
}

小提琴

于 2013-08-20T13:21:01.297 回答
0

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

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

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

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

你也可以试试这个…… 再次提琴

于 2013-08-20T13:22:39.403 回答