CODEWITHSUNDEEP
htmlcss
Rob Sedgwick
Rob Sedgwick

Reputation: 4514

Forcing table inside table-cell div to be fill 100% width

I have a div which is marked as display: table-cell. Inside this I have a table which isn't wide enough to fill the div, but I want it to. How do I do this?

<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/

It works fine when display: table-cell is commented out.

Upvotes: 1

Views: 3959

Answers (2)

emmanuel
emmanuel

Reputation: 9615

table-cell value makes element behave as a <td>.

So you need a container with 100% width to make table-cell work properly in 100% width:

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

Good Luck!

Upvotes: 1

DevilishDB
DevilishDB

Reputation: 615

Set the body display to table, make it 100% wide. Use this CSS:

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

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

Alternatively:

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

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

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

Upvotes: 1

Related Questions