Question

我有一个div，标记为display：table-cell。在这里，我有一张不足以填充div的桌子，但我想要它。我该怎么做？

<html>
<head>
<title>Test</title>
<style type="text/css">

#content {
    padding: 10px;
    background-color:red;
    display: table-cell;
    }

</style>
</head>
<body>
    <div id="content">
        <table width="100%">
            <tr>
                <td>BitOfText</td>
            </tr>
        </table>
    </div>
</body>
</html>

jsFiddle at：http://jsfiddle.net/GrimRob/gL7aar9h/

显示时工作正常：表格单元格被注释掉。

Answer 1

将正文display设置为table，使其宽100％。使用这个CSS：

body {
    display: table;
    width: calc(100% - 16px); /* 8px margin either side */
}

JSFiddle：http://jsfiddle.net/gL7aar9h/1/

可替换地：

body {
    display: table;
    width: 100%;
    margin: 0;
}

JSFiddle：http://jsfiddle.net/gL7aar9h/2/

来源：Why is width: 100% not working on div {display: table-cell}?

Answer 2

table-cell value使元素表现为<td>。

因此，您需要一个宽度为100％的容器，以使表格单元在100％宽度下正常工作：

<div style="display: table; width: 100%;">
<div id="content">
    <table width="100%">
        <tr>
            <td>BitOfText</td>
        </tr>
    </table>
</div>
</div>

祝你好运！

强制表格单元格内的表格填充100％宽度

2 个答案: