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.
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}?
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!
Related
There are one header and one footer in a FreeMarker template page.
I want to insert a div between the header and the footer.
And the div must extend to the footer.
The code is as follows:
<?xml version="1.0"?>
<!DOCTYPE pdf PUBLIC "-//big.faceless.org//report" "report-1.1.dtd">
<pdf>
<head>
<macrolist>
<macro id="nlheader">
<table style="width: 100%; font-size: 10pt; position:fixed">
</macro>
<macro id="nlfooter">
<table class="footer" style="width: 100% ;position:fixed">
</macro>
</macrolist>
</head>
<body header="nlheader" header-height="10%" footer="nlfooter" footer-height="65pt" padding="0.5in 0.5in 0.5in 0.5in" size="Letter">
<table>
<tr>
<td>Here is a table</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="extend_div"></div>
</td>
</tr>
</body>
</pdf>
The height of HTML tag seems invalid in FreeMarker templates.
And I want to use JavaScript to detect the height of tables, but it seems also invalid.
How to configure the div to make it extend to the footer?
Check the fiddle at https://jsfiddle.net/u7reck5L/9/. You could see the purple background covering the whole space, Use flex property.
<div class="starter">
<header>
This is Hweader
</header>
<div class="main-wrapper">
<h1>
This is content
</h1>
</div>
<footer>
This is footer
</footer>
</div>
html, body {
height: 100%;
}
header, footer {
height:30px;
}
.starter {
display: flex;
height: calc(100% - 30px);
flex-direction: column;
}
.main-wrapper {
background-color: #8723FF;
position: relative;
flex: 1 0 auto;
}
I am having some trouble formatting DIVs. I'm not much of a web guy so sorry if this question is a little silly.
Currently in my web page I have a Form with 3 divs inside. One div lays on-top, and the other two lay abreast:
However if the bottom two divs are both set to 50% width of the container they will stack vertically. If set to 50% and 49% they will stay abreast but there is a large ugly gap:
Here is a simplified version of the HTML, the styling is included.
<form id="Form1" style="width:100%">
<div id="Div1">
<table id="Table1" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div2" BorderWidth="1" Style="display: inline-block;
width: 49%; float: left;">
<table id="Table2" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div3" BorderWidth="1" Style="display: inline-block;
width: 50%; float: Right;">
<table id="Table3" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
</form>
Thank you for your help.
I would use flexbox.
Use tables for tabular data and not layout.
You will need to account for the width the border adds to your element's width. The simplest fix is to apply box-sizing: border-box; to those elements. This will tell the browser to include the border when calculating the width.
i.e. If you tell an element to have a width and height of 200px and give it a 5px border, without box-sizing: border-box; your element will have a width and height of 210px ( 5px + 200px + 5px ). With box-sizing: border-box; the border is included in the width so the width and height remain 200px and the border is placed within, reducing the available space for content.
div {
min-height: 100px;
}
form {
display: flex;
flex-wrap: wrap;
}
div {
box-sizing: border-box;
}
div:nth-child( 1 ) {
width: 100%;
border: 1px solid red;
}
div:nth-child( 2 ) {
width: 50%;
border: 1px solid green;
}
div:nth-child( 3 ) {
width: 50%;
border: 1px solid yellow;
}
<form>
<div></div>
<div></div>
<div></div>
</form>
That's because the border-width. If you puts 50% + 50% + borders is more than 100%. I don't remember right now but exist a css property or something similar that's allows to the border to be included to the % of width. That will fix your problem.
I know there are similar questions, but I was not able to find answer to my question.
I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.
I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).
Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/
.wrapper {
width: 100%;
max-width: 800px;
}
.left {
border: 1px solid green;
float: left;
width: 220px;
}
.right {
width: 100%;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Thanks for any help. I Googled, but haven't found nothing.
Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them).
I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.
Did you tried use table properties?
The .wrapper can be the table, then their children will be the cells. Look:
.wrapper{
width: 100%;
display: table;
}
.left{
border: 1px solid green;
width: 220px;
display: table-cell;
}
.right{
border: 1px solid red;
display: table-cell;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/83295cvs/
Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.
http://jsfiddle.net/z12p0b5v/
HTML:
<div class="container">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
</div>
CSS:
.container {
width: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.left .content {
width: 200px;
height: 200px;
background-color: red;
}
.right {
padding-left: 200px;
}
.right .content {
background-color: blue;
width: auto;
height: 300px;
}
Just put table with width:100% into a div with display:flex
.wrapper{
width: 100%;
max-width: 800px;
}
.left{
border: 1px solid green;
float: left;
width: 200px;
}
.right{
border: 1px solid red;
width: 100%;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<div style="display: flex;">
<table class="right">
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
</table>
</div>
</div>
I am wanting to have a page with a fixed-height header and footer, and with the contents taking 100% of the remaining height.
I currently have the behavior I desire working in Chrome, but in Internet Explorer, the row will grow beyond the desired height, forcing the footer off of the page (as evidenced by the scrollbar on the page). I can't find a fix for the Internet Explorer problem for the life of me.
Here is the desired behavior (in Chrome), note the row does not expand to fit contents, and instead has the ability to scroll:
Here is the undesired behavior I am experiencing with Internet Explorer:
Here is the approach I am taking:
<head>
<style>
body {
margin: 0px;
table-layout:fixed;
}
table {
border-collapse:collapse;
}
table, tr, td {
overflow:hidden;
padding: 0px;
}
</style>
</head>
<body>
<table style="width:100%; height:100%; top:0px; bottom:0px;">
<!--HEADER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#ff0000; text-align:center;">
<h1>Piano Festival</h1>
</td>
</tr>
<!--CONTENTS-->
<tr>
<!--LEFT CONTENT PANE-->
<td style="background-color:#ff00ff;">
<div style="height:100%; overflow-y:scroll;">
<form>
<!--Form contents here-->
</form>
</div>
</td>
<!--RIGHT CONTENT PANE-->
<td style="background-color:#00ffff; width:100%;">
</td>
</tr>
<!--FOOTER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#00ff00";>
</td>
</tr>
</table>
</body>
I'd prefer to avoid using any Javascript or CSS extensions. How can I work around this problem so that I get the same behavior in IE that I have in Chrome right now (scrollable contents instead of a growing row height)?
I also highly recommend not using tables for this. Here is a refactored version using divs to get you started.
HTML:
<div class="header">
<h1>Piano Festival</h1>
</div>
<div class="registration">
...lots of stuff....
</div>
<div class="main">
Main section
</div>
<div class="footer">
footer
</div>
And here's the CSS:
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.header {
margin: 0;
background: darkgreen;
height: 10%;
}
.registration {
background: deeppink;
width: 20%;
overflow: auto;
height: 80%;
float: left;
}
.main {
display: inline-block;
}
.footer {
background: blue;
height: 10%;
position: fixed;
width: 100%;
bottom: 0;
}
Here's a working demo.
I have a table which overflows its containing div. I want to show all the contents in the table, so the table has to go over 100% width to do so. The problem is the containing div does not reflect the size of its child. I have an example here, it's a responsive page, but the problem only happens at low widths - at high widths it is fine.
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" width="400" height="100" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
js fiddle here: http://jsfiddle.net/GrimRob/qg75arbs/
You should consider using table-layout: fixed and some width on the table or cells.
Relevant CSS:
table {
table-layout: fixed;
min-width: 960px;
}
table-layout: fixed is the other table layout algorithm where browser stick to what the author (you) want and don't try anymore to adapt dimensions to the content. That works if you've some indication of width wanted, like a min-width: http://jsfiddle.net/qg75arbs/1/
A simple min-width on table without table-layout: fixed also works, depends on your requirement.
Removing table { word-break: break-all; } also works, seems strange to allow this while trying to have large cells.
Add this to your #content css if you want the table to push out the containing div.
display: table-cell;
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all;
width:100%;
}
.img1 {
min-width:200px;
width:100%;
height:auto;
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" class="img1" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
I think the problem here is that the table will only shrink down to as small as the content (most of the time) and in this case you will note that each column has got to it's smallest size (1 character width), with a static width image.
In essence, the table element is not really responsive as much as you want and becomes static at a smaller size. You can scale the image or hide columns below a certain width but if you do use a table element it will always only shrink down to a certain size.