Forcing table inside table-cell div to be fill 100% width
Question
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.
2 answers
solution1
1 ACCPTED 2014-09-07 18:26:56
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}?
solution2
1 2014-09-07 18:27:25
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.