5

我有一张桌子，里面有酒吧。我display: table-cell用来对齐底部的内容。问题是容器divs 不再水平对齐在它们对应TH的 s 上（它们的宽度没有设置）

这是一个显示问题的jsFiddle

4

2 回答 2

3

问题

使用 - 属性时的问题table-cell在于它的行为类似于“真正的表格单元格”，而不再像block- 或 -inline元素。当父元素table-row和table缺失时，它们是匿名生成的。所以盒子里的东西都会像松动一样margin。

您可以在此处阅读有关此内容的更多信息：“可视格式化模型中的表格”

我稍微重建了您的 HTML 结构，这似乎工作正常：

演示

http://jsfiddle.net/insertusernamehere/XPSQG/

CSS

<style>

    #graph th {
        background:         red;
    }

    #graph td {
        min-width:          30px;
        margin:             0;
        padding:            0;
        color:              #222222;
    }

    #graph div {
        display:            block;
        position:           relative;
        margin:             0 auto;
        width:              30px;
        max-width:          30px;
        height:             100px;
        background-color:   #EFEFEF;
        border:             1px solid #000000;
    }

    #graph span {
        position:           absolute;
        left:               0;
        top:                -20px;
        width:              100%;
        color:              #222222;
        font-size:          16px;
        line-height:        16px;
        text-align:         center;
    }

    #graph p.color {
        position:           absolute;
        right:              0;
        bottom:             0px;
        width:              100%;
        margin:             0;
        color:              #222222;
    }

    #graph p.color.c1 {
        background:         #0f0;
    }

    #graph p.color.c2 {
        background:         blue;
    }​

</style>

html

<div id="graph">
    <table>
        <tr>
            <td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>
            <td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>
            <td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>
            <td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>Some long value</th>
        </tr>
    </table>
</div>

这个怎么运作

它基本上将列的内容（绿色百分比<p>标签）放在底部。要将数字放在上面，您可以轻松地将它们放在<p>-tag 中，然后再次将它们“移出”。这是由这部分完成的：

top:                -20px;
font-size:          16px;
line-height:        16px;

这表示行高和字体大小为 16px。top: -16px将其完全移出就足够了 - 额外的 4px 添加了一个不错的填充。:)

希望你能明白。

笔记

您在某处使用了此属性：

countunit="0_1_0"

由于这不是有效的 HTML，请使用data-prefix：

data-countunit="0_1_0"

这是有效的 HTML5，它也不会在旧浏览器中造成任何问题。

于 2012-07-17T15:01:03.037 回答
1

有一个技巧可以让一个元素水平居中 display: table-cell 在另一个元素中。

假设周围元素具有 .table-wrapper 类，而内部元素具有 .table-cell。使用以下 CSS：

.table-wrapper {
  display: table;
  width: 100%;
  text-align: center;
}
.table-cell {
  vertical-align: middle;
}

这样，您可以在 .table-cell 中垂直和水平地居中文本或任何您想要的内容。

于 2015-02-17T09:33:21.737 回答