views:

1016

answers:

1

I'd really love this to work in IE. I'm not able to change the fact that tables should not be used here. IE is the only browser the project I'm working on is required to support.

Here's the code:

<html>
<body>

<style type="text/css">
#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 95%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}
</style>

<div id="test">
<table>
<tr>
<td colspan="2">

<div class="scrollable">

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</    td>
</tr>

</table>

</div>

</td>
</tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
</body>
</html>

I've been using the Tryit Editor to play with this. Thanks in advance for your help!

A: 

I'm not exactly sure what you're trying to accomplish, but try this in your CSS:

#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 50%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}

.scrollable {
    height:40px;
    width:100%;
    overflow-x:scroll;
    overflow-y:none;

}
Diodeus
It worked! I replaced my #test table div.scrollable with your .scrollable and it worked. It appears that specifying overflow-x and overflow-y rather than simply overflow fixes the problem in IE (and causes expected behavior in FF).Thanks again!
overslacked