I am trying to get the table "innerTable" to fill all remaining space inside another table. The browser in question is IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table won't scale to the containing TD. I tried to enclose the table in DIV on various depths (TD, TR, ..), but it did not help.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #full {
height: 100%;
}
.myTable {
height: 100%;
table-layout: fixed;
width: 300px;
}
.fit {
height: 1px;
}
td {
border: 1px solid gray;
padding: 5px 10px 5px 10px;
}
</style>
</head>
<body>
<table class="myTable">
<tr class="fit"><td><h1> hello </h1></td></tr>
<tr style="height: 100%;">
<td id="problem">
<table id="innerTable" style="height: 100%; white-space: nowrap;">
<tr style="height: 100%;">
<td style="height: 100%;">
Hello World!!!
</td>
</tr>
</table>
</td>
</tr>
<tr class="fit"><td><h2> world </h2></td></tr>
</table>
</body>
</html>
If I style the td#problem to height: 100%, innerTable fits the remaining space, but the td#problem scales to something 'big', something larger then html block. I thought that 100% for TD's height should refer to containing block (TR in this case, which I tried with-and-without height:100%), but it does not seem so.
BTW. design works in other browsers, it is probably just IE8 that causes a problem
Just tested, the site works on ALL other document and browser modes in IE8, except the one I ought to use.
Try this link. i guess this is will help you.
Do these two things to fill the spaces.
table tr td{padding:0;}
<table cellpadding="0" cellspacing="0"></table>
or you an do this
table tr td{position:relative;}
<table cellpadding="0" cellspacing="0" style="position:absolute;left:0;top:0;width:100%;height:100%"></table>
HERE THE FIDDLE
Related
What is the float alternative for the email clients?
Here is what I have using float. And I want the alternative approach to preserve the behavior exactly.
html
<div class="container">
<div class="leftText">
left text
</div>
<div class="rightText">
right text right text
</div>
</div>
css
.leftText {
display: inline-block;
border: 1px solid green;
background: yellow;
}
.rightText {
display: inline-block;
float: right;
border: 1px solid green;
background: cyan;
}
jsfiddle
Here is what I tried to do using available in all email clients text-align and calc (calc is available according to this).
html
<div class="container">
<div class="leftText">
left text
</div>
<div class="rightText">
right text right text
</div>
</div>
css
.leftText {
display: inline-block;
border: 1px solid green;
background: yellow;
}
.rightText {
display: inline-block;
text-align: right;
width: calc(100% - 58px);
min-width: 122px;
border: 1px solid green;
background: cyan;
}
jsfiddle
This approach does not work in a way that when the right text is moved to its own line the words does not wrap due to the min-width being set. If it would be possible to add word wrapping after the right text moved to its own line that solution would be what I seek.
According to this Outlook does not support display: table and after testing it turns out to be true. So, please, do not advise me to use the display: table or similar display (like inline-table, table-row, table-column, table-cell etc.).
float works with nearly every email client except IBM Notes 9, Outlook 2007–16 (desktop PC) and Windows 10.
In email clients where float doesn't work, to float something right, as an example, for a <table> I use either <table align="right"> or <table style="text-align: right;">
Good luck.
As mentioned above, it is possible to use tables to simulate floats. Below is the code using hybrid method of coding. it works the way you want it to.
Note: CSS is just to show you how the stacking would work. Below code can work the same without media queries.
.wrapper{width:680px;outline: 1px solid #f00;}
.wrapper div{outline: 1px solid blue;}
#media screen and (max-width: 480px) {
.wrapper{width:100% !important;}
}
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">
<!--[if (gte mso 9)|(IE)]><table cellspacing="0" cellpadding="0" border="0" width="680" align="center"><tr><td><![endif]-->
<div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:10px;">left</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:10px;">right</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
Hope this is the answer you where looking for.
Cheers
Here is the trick I come up with.
html
<div class="l">
left text
</div>
<div class="m">
</div>
<div class="r">
rigth text rigth text
</div>
css
.l {
display: inline-block;
}
.m {
display: inline-block;
width: calc(100% - 180px);
}
.r {
display: inline-block;
}
jsfiddle.
It is straightforward. I need to always have a distance between left and right component as much as possible and it is depicted in the calc property of the fictitious element.
If TBODY height is 300px and the displayed content inside it will be only 50px, it shows empty space at the bottom of the content as from 51PX to 300PX, My intension is If content > 300 using overflow:auto I want to display scrollbar. Please suggest me
<!DOCTYPE html>
<html>
<head>
<style>
div.TableContainerToScroll {
height: 651px;
overflow: auto;
width: 100%;
margin: 15px 0 0 0;
position: relative;
vertical-align:top;
}
html>/**/body div.TableContainerToScroll table>tbody {
overflow: auto;
height: 200px;
overflow-x: hidden;
background-color: #00FF00;
}
div.otherclass {}
</style>
</head>
<body>
<div id="pdata" class="TableContainerToScroll">
<div class="otherclass">
<TABLE cellSpacing=0 cellPadding=0 width="97%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=2 width="100%" align=center border=0>
<TBODY>
<TR>
<TD align=center><BR>Sample Text Here<BR></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
</div>
</div>
</body>
The problem is that rows are at least as tall as the content. See Table height algorithms:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells.
And max-height won't help, because
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.
Then, you can't make the contents overflow the cells. However, you can wrap the contents in a container with max-height, and let it overflow:
div {
overflow: auto;
height: 175px;
}
p {
border: 1px solid;
}
p.tall {
height: 400px;
}
table {
border: 1px solid blue;
display: inline-table;
}
<table>
<tr>
<td>
<div>
<p class="tall">I am so tall</p>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div>
<p>I am not tall</p>
</div>
</td>
</tr>
</table>
I'm having some problems with IE7 and table with fixed-layout and fixed column sizes. Most browsers use the column width to set the size of the cell including padding yet IE7 seems to set it excluding padding so there is an over-hang.
I've searched, searched and searched again for a solution but I can't find anything decent except applying "box-sizing: border-box" to everything else and thats out of the question. Dropping "table-layout: fixed" also works but too much other code relys on this.
How can I get consistency across browsers?
<!-- DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" -->
<html>
<head>
<style type="text/css">
div {
width: 200px;
height: 10px;
background-color: blue;
}
table {
width: 200px;
border-collapse: collapse;
table-layout: fixed;
}
.first {
width: 50px;
background-color: green;
}
.second {
width: 150px;
background-color: red;
}
.alt {
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<table>
<colgroup>
<col class="first" />
<col class="second" />
</colgroup>
<tr>
<td>Foo</td>
<td class="alt">bar</td>
</tr>
</table>
</body>
</html>
Similar question: <col> width and padding - IE7
IE7 SS
IE9 SS
IE doesn`t support table padding. You need to apply the pad to the table data cell instead.
I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest.
Is this possible using CSS, etc?
IE only
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
height: 20px;
overflow: hidden;
width: 25%;
}
<table id="fixedheight">
<tbody>
<tr>
<td>content</td>
<td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td>
<td>more content</td>
<td>small content</td>
<td>enough already</td>
</tr>
</tbody>
</table>
Universal solution
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
width: 25%;
}
#fixedheight td div {
height: 20px;
overflow: hidden;
}
<table id="fixedheight">
<tbody>
<tr>
<td>
<div>content</div>
</td>
<td>
<div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div>
</td>
<td>
<div>more content</div>
</td>
<td>
<div>small content</div>
</td>
<td>
<div>enough already</div>
</td>
</tr>
</tbody>
<table>
Set the CSS height property to what you want the cell heights to be, and use overflow: hidden (see CSS overflow) to prevent contents from expanding the cells.
Give the table a class:
<table class="myTable">...</table>
And in the CSS, try the following:
table.myTable td {
height: 20px;
overflow: hidden;
}
The CSS Styles you will want to set are:
display:block, min-height, and max-height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{font-size:16px;}
table{}
table tr{
display:block;
border-bottom:solid green 1px;
height:.8em;
min-height:.8em;
max-height:.8em;
background-color:#E300E3;
overflow:hidden;
}
</style>
</head>
<body>
<table id="MyTable">
<tr><td>16px Font-Size</td><td>Column2</td></tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table, tbody, tr {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border-style: none;
}
tr#MainTitle
{
height: 70px;
}
div#test {
height: 100%;
background-color: blue;
}
/* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */
td.MainMenu {
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main">
<tbody>
<tr id="MainTitle">
<td>Title</td>
</tr>
<tr id="MainMenuRow">
<td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
(edit) I've tried to simplify the issue. I have a table. I want the top title row to be fixed in size and the next content row to fill the remaining screen.
As I have it set up if the content cell is height:100% Then the page is larger than the window (by the size of the title row) yet if I switch this to auto the cell is the right size for the window but the contained div does not fill the cell.
Whats going on?
tr does not accept height attribute. You need to set that on td or th element. This code should do the work.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;}
tr th {height:70px;}
tr td {background-color: blue;position:relative;vertical-align:top;}
.text {position:relative;height:100%;width:100%;background:yellow;}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main" cellpadding="0" cellspacing="0">
<tr>
<th>Title</th>
</tr>
<tr>
<td><div class="text">Test</div></td>
</tr>
</table>
</form>
</body>
</html>
The problem is being caused by the default margins on the BODY element in your code. You are specifying that the BODY should take up 100% of the available space, but by default, the BODY tag will add a margin to this, causing your elements to take up slightly more than 100% of the available screen space.
You can fix this by adding the following to your BODY style:
html, body, form {
height: 100%;
margin: 0px;
}