強制表格單元格div中的表格填充100％寬度

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位於： 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/

來源：為什么寬度：100％在div {display：table-cell}上不起作用？

Answer 2

table-cell值使元素的行為類似於<td> 。

因此，您需要一個寬度為100％的容器，以使表格單元格以100％的寬度正常工作：

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

祝好運！

強制表格單元格div中的表格填充100％寬度

問題描述

2 個解決方案

解決方案1
1 已采納 2014-09-07 18:26:56

解決方案2
1 2014-09-07 18:27:25

強制表格單元格div中的表格填充100％寬度

問題描述

2 個解決方案

解決方案1 1 已采納 2014-09-07 18:26:56

解決方案2 1 2014-09-07 18:27:25

解決方案1
1 已采納 2014-09-07 18:26:56

解決方案2
1 2014-09-07 18:27:25