Forum Moderators: not2easy
required is for content within a table cell to break/wrap or scroll (scroll being preferential for forward compatibility) if it gets too long, rather than horizontally stretch the table cell ~ this is only ever likely to happen if it's a long URL or word.
Main audience is IE and IE7 is being taken into the mix here.
here's what I have so far, so nearly there, but the horizontal scrollbar appears in IE even when it's not required.. overflow: auto makes the vertical scroll too, which I don't want, splitting into x and y (which FF now supports too btw) works well but as soon as I try to use auto on the x-axis it makes the y-axis scroll too :(
Conditionals will be invoked so feel free to hack ;)
<!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=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0;}.left {background: #eee; width: 50%;}
.right {background: #ffe;}table {
table-layout: fixed;
border-collapse: collapse;
}
td {
border-width: 1px 0;
border-style: solid;
border-color: #000;
padding; 0;
}td div { /* for FF and Opera, IE workarounds are in their respective stylesheets */
width: 100%;
overflow: auto;
}</style>
<!--[if IE]>
<style type="text/css" media="screen">
table td.left div {
overflow-y: visible; /* for IE7 only */
overflow-x: scroll; /* for IE7 only */
}
</style>
<![endif]--><!--[if lt IE 7]>
<style type="text/css" media="screen">
table td.left div {width: 100%; /* layout hack for <IE7 */}
</style>
<![endif]--></head>
<body>
<table summary="" cellspacing="0">
<tr>
<td class="left">
<div>
111112222222222222222222222222222222222222221111111111break 11111111111111111111111111111111111111111111111111111111111111111111111111
</div>
</td>
<td class="right"> 50% wide </td>
</tr><tr>
<td class="left">
<div>
11111222222222222222 222222222222211 111111111111111 111111111111111111111
</div>
</td>
<td class="right"> 50% wide </td>
</tr></table>
</body>
</html>
Thanks
my solution is to kill the vertical scroll for IE only, using overflow-y: hidden,
but this then means the bottom line of text is still obscured by the horizontal scroll. Giving the div bottom padding of an extra 1em to force the extra space that the horizontal scroll needs seems to do the trick.
<style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0;}.left {background: #eee; width: 50%;}
.right {background: #ffe;}table {
table-layout: fixed;
border-collapse: collapse;
}td {
border-width: 1px 0;
border-style: solid;
border-color: #000;
padding: 5px;
}td.left div{ /* for FF and Opera, IE requires a workaround for the vertical scrollbar which is also produced */
width: 100%;
overflow: auto;
}</style>
<!--[if IE]>
<style type="text/css" media="screen">
table td.left div {
overflow-y: hidden;
padding-bottom: 1em; /* to compensate for space taken by horizontal scrollbar */
}
</style>
<![endif]-->
Note: IE will also only do this if table-layout is set to fixed.. and nested tables seem to be having an effect once I try it in situ :(
Suzy
