Behavior of code snippet is different in Chrome 51.0.2704.103 and Firefox 47.0.1.
Please explain why this happens. Where behavior is correct, where not and why you think so. Thanks.
div,
td {
border: 1px solid black;
}
.container {
position: absolute;
}
.w100Pc {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
<div class="container">
<div>Modal dialog header</div>
<table>
<tr>
<td class="w100Pc">rest of space column</td>
<td class="nowrap">content based width column</td>
</tr>
</table>
<div>Here goes main content what should stretch "container" width</div>
<div>Modal dialog footer</div>
</div>
Browser render the code differently i guess it's because they follow different standards, i think Firefox is rendering the code currently in you example and to make it look the same in both browsers just add display:block;
div,
td {
border: 1px solid black;
}
.w100Pc {
display:block;
width: 100%;
font-family:'Times New Roman';
}
.container {
position: absolute;
left: 200px
}
<div style="position: absolute; left:200px">
<table class="w100Pc">
<tr>
<td class="w100Pc">
w100Pc
</td>
<td>buttons</td>
</tr>
</table>
</div>
Related
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
I have a page with two panels. Second panel contains some large table so even with wrapped content it can't be displayed on full width window. Than I've added a horizontal scroll to fix this problem but it seems like div doesn't want to fit large table size.
Fiddle link
After some research I've found how to force second panel to fit the table size with this css change:
.pane {
display: table;
}
updated fiddle link
But there is another issue. The width of first and second panels are different. How to force the first panel to take all avaliable width even if it hidden with horizontal scroll?
Is there any pure html/css solution for this?
As advised, use display:table;, it will allow container to shrink/expand according to content and beyond window's size.
But since you need also an overflow, you may add an extra wrapper in between to allow those children to grow beyond the window's width and match to the widest one, i gave it .buffer as a classname to give it some meaning:
example:
.list {
overflow-x: auto;
}
.buffer {
display: table;
}
.pane {
border: 1px solid red;
margin: 15px 0;
}
.pane .head {
width: 100%;
background: #959595;
}
.pane .body {
width: 100%;
}
.pane .body table {
border: 1px solid green;
}
<div class="list">
<div class="buffer">
<!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
<div class="pane">
<div class="head">
Pane 1 header
</div>
<div class="body">
Some body
</div>
</div>
<div class="pane">
<div class="head">
Pane 2 header
</div>
<div class="body">
<table width="100%">
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
https://jsfiddle.net/8cepsL09/6/
Its NOT a pure html/css solution but it works
I've used jquery to get the width of the second and apply it to the first
$('#pane1').width($('#pane2').width())
.list {
overflow-x: auto;
}
.pane {
border: 1px solid red;
width: 100%;
margin: 15px 0;
display: table;
}
.pane .head {
width: 100%;
background: #959595;
}
.pane .body {
width: 100%;
}
.pane .body table {
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="pane" id="pane1">
<div class="head">
Pane 1 header
</div>
<div class="body">
Some body
</div>
</div>
<div class="pane" id="pane2">
<div class="head">
Pane 2 header
</div>
<div class="body">
<table width="100%">
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You'll need to add in jquery to your site and add id's to your panes (you can use other ways of accessing your panes, but I find that ids are easist)
you can add this to your css
table {
border-collapse:collapse; table-layout:fixed;
}
table td {
border:solid 1px #fab; width:25%; word-wrap:break-word;
}
and adapt the width to the amount of columns.
EDIT: fiddle.js here
It would also be possible to play around with something like e.g.
padding-right: 3000px;
margin-right: -3000px;
which would extend the space used by the element.
See https://www.sitepoint.com/css-extend-full-width-bars/ for more details...
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.
Using the suggestions of this fiddle I made a scrolling table with fixed headers:
<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
<meta charset='UTF-8' />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 2em;
background: #808;
}
#container {
overflow-y: auto;
height: 200px;
padding-top: 1em;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
th {
height: 10px;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
background: #0f0;
border: 2px solid #f0f;
white-space: nowrap;
}
th > div {
position: absolute;
background: #ff0;
color: #00f;
padding: 1em;
top: 0;
margin-left: auto;
line-height: normal;
border: 3px solid #805;
opacity: 0.5;
}
td {
border-bottom: 3px solid #666;
background: #fdd;
color: #c0c;
padding: 1em;
}
td:first-child {
border-right: 1px solid #aaa;
font-family: serif;
text-align: center;
}
td:last-child {
border-left: 1px solid #aaa;
}
</style>
<title>test</title>
</head>
<body>
<div>
<section>
<div id='container'>
<table>
<thead>
<tr class='header'>
<th>
head 100
<div id='h1'>head 1</div>
</th>
<th>
head 2
<div id='h2'>head 2</div>
</th>
<th>
head last
<div id='hL'>head last</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aardvark</td>
<td>beta<br />longer text<br />spanning on some lines</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta<br />long text</td>
<td>omega and something else</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega just to finish</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html>
The scrolling works smoothly, as you can test on https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ but it has an aesthetic issue: the header of the columns are not centered.
The TH height will be set to 0 and its borders will be removed: now it has an ugly color just to see it during the debug phase.
I tested many solutions, and some of them are commented away in the fiddle:
with width: -moz-available; every header starts at the correct position, but all of them end at the right side of the table; I added the opacity: 0.5; so this behavior can be clearly seen
with width: 100%; the DIV takes the width of the whole table, not of the parent TH
with width: inherit; nothing happens (the DIV inside the TH don't inherit the TH width)
the margin-left: auto; margin-right: auto; trick doesn't give a result
Even using two nested DIV inside the TH is not a solution, since at least the outer one must fill the TH, which is not the case.
The number of columns is not determined a priori, because the table will receive data from a database, and it's up to users to decide which columns will be shown. This also prevents me to use fixed widths.
How can I center that DIV inside the TH width?
Short answer: you can't.
Your divs are positioned absolutely which removes them from the regular flow of the document, hence the width of the parent can have no effect.
You could center them if the divs were absolute in relation to their parent... however, you cannot set your parent's position to relative, because the divs will then appear inside of the #container element which has its overflow hidden. If you nudge them up to where they should be, they will no longer be visible. Not to mention that you would not be able to fix them to the top.
I can think of no good way of doing this using only CSS, especially if the number and width of columns is not fixed.
How do I make an element take up a percentage width of a table cell? When I attempt to do a percentage, say 70%, it grows much larger than the containing cell. 70% should be smaller than the containing cell! Here's a barebones example of my page. The absolute positioning is necessary for some layering I want to do.
HTML
<table>
<tr>
<td>
<div>hello</div>
</td>
<td>
<div>world</div>
</td>
</tr>
</table>
CSS
td {
position: relative;
width: 10em;
}
div {
position: absolute;
width: 70%;
}
Matt Ball's comment got me on the right track. It's some extra markup.
HTML
<table>
<tr>
<td>
<div class="container">
<div class="bar">hello</div>
</div>
</td>
<td>
<div class="container">
<div class="bar">world</div>
</div>
</td>
</tr>
</table>
CSS
td {
width: 10em;
}
.container {
position: relative;
}
.bar {
position: absolute;
width: 70%;
}