Handling overflow in tables

Question

Hello once again elite coders of stackOverflow. I have another curiously simple yet seemingly hard to answer question. I'm just full of these it seems.

If I have a table like this very very simple example:

table {
    table-layout:fixed;
    width:300px;
}

.td1 {
    width:100px;
}
.td2 {
    width:200px;
}

and in one of my .td2 contains an image that is lets say, 300px in width. I would like to show scroll bars to allow users to scroll to see it all. However I don't think this is possible is it?

So question:

1) are there any other options apart from hidden for handling overflow in tables

2) Is it possible to show scroll-bars only when content pushes beyond a set width? (I swear I've seen it in some forum software but I can't remember which one)

Many tanks in advance.

Answer 1

What about

overflow: auto

Content is clipped and scrolling is added only when necessary.

Put the image inside a div in the table cell and make the width and height of the div to be 100% of the td and style it to overflow: auto

<style>
.test { width: 100%; height: 100%; overflow: auto; } 
</style>

<td>
<div class="test">
your image
</div>
</td>