Menu
I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page.
I'm using the Trip Switch hasLayout trigger to apply inline-block in IE6/7.
Does anyone know how (or even if) I can get the table only to fill the natural width of the wrapper element displayed with inline-block in IE6/7?
You can see the code running live at http://jsbin.com/uyuva.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.wrapper {
display: inline-block;
border: 1px solid green;
}
/*
display: inline-block triggers the wrapper element to have layout for IE 6/7.
The trip switch then provides the inline component of the display behaviour.
See http://www.brunildo.org/test/InlineBlockLayout.html for more details.
*/
.wrapper {
*display: inline;
}
table {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>No width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table doesn't stretch to the end of this heading</h2>
<table><tr><td>foo</td></tr></table>
</div> text
<h1>Width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table should stretch to the end of this heading</h2>
<table style="width: 100%"><tr><td>foo</td></tr></table>
</div> text
</body>
</html>
Update: here's another example of the problem, this time without using a table and using an absolutely positioned container element. You can see the code running live at http://jsbin.com/igila4.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
div {
position: absolute;
border: 1px solid red;
}
input {
width: 100%;
*width: 95%; /* fudge factor for IE 6/7 which don't support box-sizing */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
textarea {
width: 400px;
}
</style>
<body>
The width of the input and textarea below should be identical.<br/>
<div>
<input value="This is an input with width 100%"><br/>
<textarea>This is a text area with width 400px.</textarea>
</div>
</body>
</html>
627
It doesn't appear this can be achieved only through CSS.
I deliberately avoided using script because I much prefer to take advantage of the browser reflowing everything for me when the page is dynamically manipulated instead of having to write manual code to update the width.
In the end I side-stepped the issue by specifying a minimum width for my tables which should be wider than the length of any heading I'll have.
Internet Explorer 6 and 7 don't support min-width but as I've got common script that creates the tables I'm displaying I dynamically create an extra thead element that has a single cell that spans every column which I style to effectively give me the same result:
CSS
table {
min-width: 600px;
}
th.min-width {
*width: 600px;
}
HTML table structure
<table>
<thead><tr><th colspan="3" class="min-width"></th></tr></thead>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
If you can set a width on the wrapper (e.g. 50em), then the table will expand to the width of the wrapper.
However, if you need the wrapper to be widthed dynamically, then you could use javascript to set the width of the table to the offsetWidth of the wrapper. Here's the page with the javascript added: http://jsbin.com/uyuva/5
I've only tested it on my IE 8 with compatibility mode running, since I don't have IE 6/7.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
