Menu
I have a page which contains a dynamically-generated table. The number of columns of this table and the width of their content is determined at page generation time, but can be sufficiently large that the table exceeds the width of the window.
When this happens, the width of the body element does not expand to contain its contents, but is restricted to the width of the window. As such, all other descendent elements (with the exception of the table) also have a maximum width equal to the width of the window:
__________________________ window bounds
| BODY ELEM |
| ______________________ |
| | HEADER ELEM | |
| |____________________| |
| |
| ______________________ |
| | DIV#main | |
| | __________________________________________________
| | | ELEMENT WHICH IS WIDER THAN WINDOW |
| | |________________________________________________|
| |____________________| |
| |
| ______________________ |
| | FOOTER ELEM | |
| |____________________| |
|________________________|
This means when scrolling horizontally, the other block-level elements stop prematurely (their background colours do not expand, spoiling the look of the page).
Here is a jsFiddle showing the problem. Notice how the yellow block in the results window expands to the right, but the brown, white and blue blocks do not.
I'm looking for a pure CSS method of solving this problem.
The closest I've come without resorting to altering the document structure at all is this:
body {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
However, "min-content" is not supported by IE at all. Does anyone have a cross-browser, pure CSS solution to this issue?
For completeness (in case people can't see the jsFiddle), here is some code displaying the problem:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {margin:0;padding:0;}
body {
background-color: #888;
/* Adding the two lines below fixes the problem for webkit and moz. But IE does not support min-content.
min-width: -webkit-min-content;
min-width: -moz-min-content;
*/
}
header {
background-color: #321;
}
header nav {
padding: 10px;
color: #FFF;
}
footer {
padding: 10px;
color: #ccc;
background-color: #123;
}
#main {
padding: 16px;
background-color: #FFF;
}
#wideContent {
background: #FF0;
width: 4800px; /* In reality, this will vary at runtime, so I cannot set an explict width on the body */
}
table {
border-collapse: separate;
border-spacing: 0px;
border-color: #808080;
border-style: solid;
border-width: 1px;
border-bottom-width: 0;
background-color: #FFF;
}
td, th {
border-color: #808080;
border-style: none;
border-width: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px 10px;
min-width: 100px;
}
</style>
</head>
<body>
<header>
<nav>Header</nav>
</header>
<div id="main">
<div id="wideContent">
<p>Content here will be a table with a very large number of columns.</p>
<p>The content and width of the table is not known beforehand, so cannot be preset anywhere in CSS.</p>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
340
I just added following CSS. And it works.
body {
float: left;
min-width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
