Handling overflow in tables
-
16-09-2019 - |
Question
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 my questions are:
Are there any other options apart from
hidden
for handling overflow in tables?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)
Solution
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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow