I have three "panels" laid out along the row of a table. One is taller than the other two and I want all three panels to match the height of the tallest one. I tried styling the divs with height: 100%, but the the short panels stay short, even as the containing tds grow.
My HTML is generated by JSF, so I have limited control over its form, but I can modify the styles. I made a simplified version of the generated code below. The same problem occurs on IE8 and Firefox. However, IE8 renders the short panels vertically aligned to the top of the td, while Firefox renders them in the middle.
<html>
<head>
<title>Test Table</title>
<style TYPE="text/css">
td {border: 1px solid red; padding: 1px;}
.panel {border: 1px solid blue; padding: 1px;height:100%}
.panel-header{background-color: green; color: white;}
.panel-body {border: 1px solid green; padding: 1px; height:100%;}
</style>
</head>
<body>
<h1>Test Table</h1>
<table width="100%">
<tbody>
<tr>
<td>
<div class="panel" style="height:200px;">
<div class="panel-header">
Header One
</div>
<div class="panel-body">
Body One
</div>
</div>
</td>
<td>
<div class="panel" style="height:100%;">
<div class="panel-header">
Header Two
</div>
<div class="panel-body">
Body Two
</div>
</div>
</td>
<td>
<div class="panel">
<div class="panel-header">
Header Three
</div>
<div class="panel-body">
Body Three
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
<html>
I don't think that you can set the height to 100% without explicitly stating a height for the tds (or the table). It seems that you have to specify an explicit height on a parent element before height:100% will take effect. Perhaps you can modify your styles to be on the td tags themselves instead of the div containers?
If it helps being able to align the divs to the top instead of the middle, I made an example here of how to do it (add vertical-align:top; to the td tags). I did an example using only divs too, though I know you said you have limited control over its form.
If you know the maximum height of one element, setting the table or table cells to that height (ie. height:200px;) should make the 100% be taken into effect on the divs.
Edit If you're not adverse to using jQuery, I have updated my example here to do what you require.
height=100%;
or
height=inherit;
One of these should do the trick :)
My solution: http://jsfiddle.net/k6Dam/2/
Remove inline-styles (hope you can do that) and set min-height of the panel-body to 200px.
Related
Brand new to HTML/CSS and experimenting.
I'm trying to place a table between two hr tag lines (one on top, one on bottom). I want to have the width of the table match the width of the lines, center everything horizontally on the page, and have sticky positioning.
What's happening is, the lines follow the width I set, are centered, and have the positioning I want. The table has the positioning, but not the width and is left-aligned with the lines (not with the page or anything).
<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
<hr>
<table style="border:1px solid black; background-color:Coral">
<tr>
<th><u>Section 1</u></th>
<th><u>Section 2</u></th>
<th><u>Section 3</u></th>
<th><u>Section 4</u></th>
<th><u>Section 5</u></th>
<th><u>Section 6</u></th>
</tr>
<tr style="text-align:center">
<td>Word<br/>Formatting</td>
<td>Lists</td>
<td>Tables</td>
<td>Images and<br/>Videos</td>
<td>Linking</td>
<td>Input Types<br/>(Text Boxes)</td>
</tr>
</table>
<hr>
</div>
Why would the table take the positioning from the div, but not the width or margin? Also, why would it left-align with the lines?
I know I can fix this by adding the width and margin to the table tag, but can it be fixed in the div tag? Or am I misunderstanding/missing something about how div tags work? I thought it would apply any styling to any elements between the tags.
Thanks so much for the help!
instead of :
<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
do :
<div style="flex-direction: column;width:100%;display: flex;max-width: 800px;margin:auto;position:sticky;top:0px;">
A table will not consume 100% of the parents width by default. the width of the table will depend on the content by default. So just add width: 100%; to the table style and it will consume 100% of the parents width.
<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
<hr>
<table style="width: 100%; border:1px solid black; background-color:Coral">
<tr>
<th><u>Section 1</u></th>
<th><u>Section 2</u></th>
<th><u>Section 3</u></th>
<th><u>Section 4</u></th>
<th><u>Section 5</u></th>
<th><u>Section 6</u></th>
</tr>
<tr style="text-align:center">
<td>Word<br/>Formatting</td>
<td>Lists</td>
<td>Tables</td>
<td>Images and<br/>Videos</td>
<td>Linking</td>
<td>Input Types<br/>(Text Boxes)</td>
</tr>
</table>
<hr>
</div>
inline styles (set using style= are one-off definitions.
An inline CSS is used to apply a unique style to a single HTML element
https://www.w3schools.com/html/html_css.asp
if you want to reuse the same style multiple times, use css classes
<style>
.commonWidthAndMargin {
width:100%;
max-width: 800px;
margin:auto;
}
</style>
<div class="commonWidthAndMargin" style="position:sticky; top:0px; ">
<hr>
<table class="commonWidthAndMargin" style="border:1px solid black; background-color:Coral">
...etc
</table>
<hr>
</div>
Also, it's the default behavior of tables to not expand to their parent. A child div would take up 100% of its parent by default. see: link
I am trying to give min width to table cells using col element of colgroup. The table is wrapped by a div which has some width set(less than combined width of all cells set in col) and overflow of div is set to auto.
Here is my html code -
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}
.cell {
padding: 5px 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="width:200px;overflow: auto">
<table class="table-block">
<colgroup>
<col style="width:300px">
<col style="width:300px">
</colgroup>
<tbody>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
My problem is cells doesn't take width from col. It is trying to fit themselves in the wrapper div. I want that the cells take the proper width given and a scrollbar should appear. I have a solution that I set table width set to the total width I need. This would require me to update table width every time I insert new column by JavaScript.
My Solution -
<div style="width:200px;overflow: auto">
<table class="table-block" style="width:600px">
<!-- table things -->
</div>
Is it a right thing to do? And why it happens?
jsFiddle link
I think the problem here is that ultimately the table defaults to 100% width of the container, and its inner elements are unable to surpass this without their content forcing it to do so. The same happens when attempting to give a tr or td a width greater than the table's own.
Your fix is pretty much the way I'd do it. The only change I'd make is:
<div style" ... overflow-x:scroll; overflow-y:hidden;">
This way a scroll bar won't appear down the side on older versions of IE.
This of course assumes that you only want your table to scroll horizontally.
I have next html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html {height:100%;}body {height:100%;margin:0;}
h1 {form-size:20px;margin:0;padding:20px;}
</style>
</head>
<body>
<table style="width:100%;height:100%">
<tr>
<td>
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
</td>
</tr>
<tr style="height:100%;" id="row">
<td style="background-color:#c0c;">
<div style="height:100%;width:100%;background-color:#00f;color:#fff;">
This cell should take all unused space of table
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#0f0;">
<h1>This text should make height of<br> this cell</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
It works perfect in all browsers - except IE, where blue div inside middle cell takes space only for text.
May be someone know how to stretch it to whole free space inside table?
UPDATE: I Know that tables are bad in page-layout. if you can show me example of div layout which have top and bottom block with variable height and middle part which use all free space of browser window I will use it. I promise =)
Don't use tables for layout please,
Use Divs and CSS, It is considered a bad practice to use tables:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Live Demo converted to DIV's
If you define a height for the body element then the blue cell does expand to fill the available space (JS FIddle demo). The problem is that an element of height: 100% takes up the full height of its parent, and for that to happen the browser has to know (be told) what the height of that parent element is.
You could achieve this with JavaScript (JS Fiddle Demo) (or any one of the various libraries, eg jQuery: JS Fiddle demo1), or by using:
table {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
JS Fiddle demo
I have no idea why using the jQuery version results in scrolling. I've tried removing padding, margin etc from the various elements (body and table), but it results in the same behaviour. Which is a tad weird, to me.
Using <div> should be something like this:
<div style="width:100%;height:100%;background-color:#00f;color:#fff;">
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
This cell should take all unused space of table
<div id="footer" style="background-color:#0f0; position:absolute; bottom:0px;width:100%;">
<h1>This text should make height of<br> this cell</h1>
</div>
</div>
The content in the center is not within a <div>, but in the main <div> itself. :)
I have a layout where I need tabs at the top, and content to fill the rest of the space.
So to make the bottom content div stretch I would need to have:
style="height:100% - 20px;"
Where 20px is the height of my tabs. Obviously that code isn't valid but it illustrates my point. So what I tried next was a table where the td in the fist tr had a set height(20px) and the td in the bottom row had no height set. The table was set to 100% both ways. And this does work, the bottom td stretches to fill. However as soon as I put the code in the project I am working on it doesn't work, and this is because of the doctype the project is using(which I cannot change):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The reason I say it doesn't work is that inside that content td there is a div set to 100% width and height, and unless the td its in has a defined height it doesn't seem to be able to see what 100% is, and simply adjusts the the minimum size it can be according to its content.
It doesn't need to be a table layout, i would prefer div's actually - but either way.
Thanks
Does this help?
http://www.themaninblue.com/writing/perspective/2005/08/29/
I know it's mainly to do with a footer but a side-effect of that is to stretch the content to 100% height.
AS far as I understood your question, using a table for anything other than tabular data is a serious no go area.
Check out this Dynamic Drive script for tabbed content article, it might help you out a lot :)
Edit:
<div>
<h4>Heading</h4>
<div>
<ul>
<li><a>Tab</a></li>
<li><a>Tab</a></li>
<li><a>Tab</a></li>
</ul>
<div>Content for Tab 1</div>
<div>Content for Tab 2</div>
<div>Content for Tab 3</div>
</div>
</div>
I believe this is a much better way to lay it out, then it's all wrapped in one div that can define it's own height :)
Try setting the height of the tr elements instead of the td (in IE6 it still won't work).
Or try something like this:
<style type="text/css">
html, body, .wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.head {
height: 20px;
}
</style>
<div class="wrapper">
<div class="head">header</div>
<p>content</p>
</div>
I don't know if that's what you're looking for (since I don't really understand your needs, and you got so many jQuery addons for that...)
did you try
<table width="100%" height="100%">
<tr style="height:20px; display:block;">
<td>pwet</td>
<td>test</td>
</tr>
<tr style="height:100%;width:100%;">
<td style="background:red; width:50%;"></td>
<td style="background:blue; width:50%;"></td>
</tr>
</table>
EDIT : Since you're using table, the td's from the first tr should be a th and the first tr should be wrapped with a thead
I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.
I am trying to use table for that so it will assign width for each box and fill up whole row.
Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....
How can i have all div in td with same height?
Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.
<table style="width: 100%; text-align:justify;">
<tr>
<td>
<div style="margin-right:15px; background-color:Gray">
Some text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
column 2 text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
Column 3 text here
</div>
</td>
<td>
<div style="background-color:Gray">
Last column text here
</div>
</td>
</tr>
</table>
Like I've told plenty of other people, you shouldn't be using divisions inside table cells.
This will achieve the exact same effect, without the divisions:
<table style="width: 100%; text-align: justify;">
<tr>
<td style="margin-right: 15px; background-color: gray;">
Some text here
</td>
<td style="margin-right: 15px; background-color: gray;">
column 2 text here
</td>
<td style="margin-right: 15px; background-color: gray;">
Column 3 text here
</td>
<td style="background-color: gray;">
Last column text here
</td>
</tr>
</table>
If you get rid of the divs and apply your styles and content directly to the table cells you will get the effect you want.
In case there is no special purpose of using div tag inside td. I would just do it without div. add style to td tag.
Mamu, I would suggest that you do not use inline style elements. Instead of styling your table tags it would be far more efficient, and better to add the the following between your <head> tags:
<style type="text/css">
table {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>
Using only those two lines of code you can apply the same elements consistently across your entire website. If you only wanted to apply them to some elements, you could create classes by adding a "." to a name of your choice:
<style type="text/css">
.MyTable {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>
And add the following to your HTML:
<table class="MyTable">
Note that class names are case sensitive. But this reusable code is far more efficient.
Furthermore, I would urge to consider the use of tables only if you are presenting tabular data. Tables load slower and are not SEO friendly. It would not be semantically correct to use them for layout. You should separate content from presentation whenever possible, and if it is layout you are after I would suggest using divs and other elements instead.