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.
Related
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.
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
I have the following HTML.
<body>
<div class="header"></div>
<div class="navdiv"></div>
<div class="mainarea">
<p></p>
<table>
<tr>
<th scope="row">Name</th>
<th scope="row">Description</th>
<th scope="row">Created</th>
<th scope="row">Created By</th>
<th scope="row">Modified</th>
<th scope="row">Modified By</th>
</tr>
</table>
</div>
</body>
I need some help with the CSS to structure the page correctly.
I want the header to be 100% across the top which I can do.
But I want the "navdiv" to be a fixed 250px on the left of the page.
Then with the "mainarea" div taking the rest of the page to the right of the navdiv.
I then also want the table to stretch across the rest of the page.
I have tried several variations and some work however I can't get the table to stretch across the rest of the space, it just either jumps below the nav, goes too far past the other content or only sizes to the content within it.
Can anyone help?
This should work:
.header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none; }
Explanation:
I'm essentially using the standard two-column overflow: hidden trick to force the main content to stay in its own column (as opposed to wrapping under the nav). position: relative on the main content is to set it as the table's offset parent, so we can use width: 100% on the table to push it to the width of the main area.
The height on the nav, the background color, and borders are for demonstration purposes only.
On the hacks:
No other (modern) browser requires margin-left: 260px, as that is covered by the overflow: hidden (forcing it into two columns).
Still, at that point, the table seems to clear to the bottom of the nav (again, only in IE6). This is solved by removing any default clear (not sure that's necessary), and floating it to the right, so it doesn't take into account the size of the nav.
Have a go with something like this, (untested)
#header{
width: 100%;
}
#navdiv{
width: 250px;
float: left;
}
#mainarea{
width: 100%;
float:left;
margin-left: 260px;
}
table{
width: 100%;
float: left;
clear: left;
}
You can use the following code. I wrapped your code with another div with class wrapper. You can modify the values. The navdiv class has 250px as you wish. You have to modify mainarea's
width with percent. This is according to wrapper width. Just play a little and you will find what is the correct percent to fit with the wrapper's width.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stackoverflow code</title>
<style>
.wrapper {
width:900px;
height:400px;
}
.header {
width:900px;
height:100px;
}
.navdiv {
width:250px;
float:left;
height:100px;
}
.mainarea {
width:72%;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="navdiv"></div>
<div class="mainarea">
<p></p>
<table>
<tr>
<th scope="row">Name</th>
<th scope="row">Description</th>
<th scope="row">Created</th>
<th scope="row">Created By</th>
<th scope="row">Modified</th>
<th scope="row">Modified By</th>
</tr>
</table>
</div>
</div>
</body>
</html>
Try this: ?
.header{
width:100%;
overflow:hidden;
}
.navdiv{
width:250px;
float:left;
clear:none;
margin:0 10px 0 0;
}
.mainarea{
float:left;
clear:none;
overflow:hidden;
}
.mainarea table{
width:100%;
float:left;
clear:none;
}
<!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;
}
How can i make the inner table to overlap the parent div with 5 px while resizing?
my current solution:
<div id="crop">
<table style="width:105%; height:105%;">
//table cells
</table>
</div>
problem is that it gets smaller when resizing...
how can I make it constantly overlap with 5px;
The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.
You should see that when rendered, the blue "outer" div is displayed within the "inner" div. The "inner" div will be red for browsers other than IE where it will be green instead.
Also note, in this example I had to subtract 2px from the height of the "inner" div to adjust for the top and bottom borders.
<html>
<head>
<style type="text/css">
#outer {
position: relative;
border: solid 1px blue;
height: 100px;
}
#inner {
position: absolute;
border: solid 1px red;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#inner {
border: solid 1px green;
height: 108px;
width: expression(document.getElementById("outer").clientWidth + 10);
}
</style>
<![endif]-->
</head>
<body>
<table width="100%">
<colgroup>
<col />
<col width="100" />
<col width="200" />
</colgroup>
<tr>
<td>
<div id="outer">
<div id="inner">
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</div>
</div>
</td>
<td>Alpha</td>
<td>Beta</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
In short:
Stick the table inside another div and set the table's width to 100%
Make that div do the moving around by setting its positioning to absolute (make sure the parent has relative) and set its width to 100%.
Use negative margins on the new div to pull it out by precisely 5px.
It's a bit messy but you'll definitely need negative margins and you'll probably need the position:absolute to have it overlapping...
Have you tried the following:
table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
This table will overlap the div with 5px at the right hand side and at the bottom. Margins are added to make the table fill the left hand side and top. Just omit the margins if you want the whole table to offset. You'd probably have to add some style to the div or content above the table, to keep the div from collapsing.
Here's a full example:
<style type="text/css">
#container {
background-color: red; //color added for illustration
}
#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>
<!-- ... -->
<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>