CSS表格布局 - 填写第二行squishes之前

Question

我正在尝试构建一个包含一行数据的页面，然后是可隐藏的帮助文本。虽然当前布局有点像表，但数据本身不是，我试图避免使用HTML表。我有几组数据元素，我想沿着列对齐，每个数据元素后跟一些帮助文本，我想要占用整个宽度。

问题是，我似乎无法获取帮助文本占用整个宽度而不会弄乱前一行的列对齐。我可以使用CSS中的table-layout: fixed来获取我想要的列，但是帮助文本只会获得一列的宽度值。为了使帮助文本跨越父级的宽度，我使用table-layout: auto并将帮助文本div的内容包装在一个元素中，并将其赋予display: table-cell。这可行，但会弄乱前面的数据列。

显示此数据的语义上是否合适，但仍然可以获得我想要的布局？

压缩帮助文本

https://jsfiddle.net/c1rq53zv/2/

HTML

<section class="summary">
    <div class="info">
        <div class="title"><span class="clickableTitle">A title</span></div>
        <div class="data">Some Data</div>
        <div class="actions"><a href="http://google.com">A link</a></div>
    </div>
    <div class="helpText">
        <strong>A bold help title</strong>
        <ul>
            <li>A list item with exceptionally long text, which is wherein we discover our problem</li>
            <li>Some other list item</li>
        </ul>
    </div>

    <div class="info">
        <div class="title"><span class="clickableTitle">Another title</span></div>
        <div class="data">Some other Data</div>
        <div class="actions"><a href="http://google.com">A link</a></div>
    </div>
    <div class="helpText">This div just has some straight text in it. The text goes on a bit, which will also cause the problem, regardless of whether I wrap it in a p tag or any similar wrapping markup.</div>
</section>

CSS

.summary {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.info{
    display: table-row;
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}
.title{
    display: table-cell;
    width: 45%;
    min-width: 45%;
    max-width: 45%;
    table-layout: fixed;
}
.data{
    display: table-cell;
    width: 25%;
    min-width: 25%;
    text-align:right;
    table-layout: fixed;
}
.actions{
    display: table-cell;
    width: 30%;
    min-width: 30%;
    text-align:right;
    table-layout: fixed;
}
.helpText{
    margin-top: 0px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: table-row;
    table-layout: auto;
}

显示/隐藏帮助文本的Javascript

$(function() {
    $(".clickableTitle").click(function() {
        hideHelpText(this)
    });
});

function hideHelpText(helpTitle) {
    console.log("I clicked it");
    var parentSection = $(helpTitle).closest('.info');
    var helpText = parentSection.next('.helpText');
    helpText.toggle();
}

搞砸了列

javascript没有变化。如果您隐藏所有帮助文本，那么列将恢复为我希望它们的样子。 https://jsfiddle.net/o13r9jke/

HTML

大致相同，但我添加了一些子元素包装器，以便我可以给它们一个表格单元格显示。

<section class="summary">
    <div class="info">
        <div class="title"><span class="clickableTitle">A title</span></div>
        <div class="data">Some Data</div>
        <div class="actions"><a href="http://google.com">A link</a></div>
    </div>
    <div class="helpText">
        <div>
        <strong>A bold help title</strong>
        <ul>
            <li>A list item with exceptionally long text, which is wherein we discover our problem</li>
            <li>Some other list item</li>
        </ul>
        </div>
    </div>

    <div class="info">
        <div class="title"><span class="clickableTitle">Another title</span></div>
        <div class="data">Some other Data</div>
        <div class="actions"><a href="http://google.com">A link</a></div>
    </div>
    <div class="helpText"><p>This div just has some straight text in it. The text goes on a bit, which will also cause the problem, regardless of whether I wrap it in a p tag or any similar wrapping markup.</p></div>
</section>

CSS

.summary {
    width: 100%;
    display: table;
    table-layout: initial;
}
.info{
    display: table-row;
    width: 100%;
    min-width: 100%;
}
.title{
    display: table-cell;
    width: 45%;
    min-width: 45%;
    max-width: 45%;
}
.data{
    display: table-cell;
    width: 25%;
    min-width: 25%;
    text-align:right;
}
.actions{
    display: table-cell;
    width: 30%;
    min-width: 30%;
    text-align:right;
}
.helpText{
    margin-top: 0px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: table-row;
    margin-bottom: 50px;
}
.helpText > * {display: table-cell; width: 100%}

Answer 1

事实证明，答案是简单地停止尝试将helpText视为表格的一部分！与许多其他事情一样，它有助于退出所有CSS类更改并从头开始。

https://jsfiddle.net/u9nucym6/

.info{
    display: table;
    width: 100%;
}
.title{
    display: table-cell;
    width: 45%;
    min-width: 45%;
    max-width: 45%;
}
.data{
    display: table-cell;
    width: 25%;
    min-width: 25%;
    text-align:right;
}
.actions{
    display: table-cell;
    width: 30%;
    min-width: 30%;
    text-align:right;
}
.helpText{ width: 100%; }