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>
