css - Resolve overflow in HTML table with image -
following code structure of html table. insert large image in tr class c0
(marked *...*
). class no-overflow
has overflow:auto
. in other pages, using same class no-overflow
there horizontal , vertical scroll bars if image gets big. however, in particular case, bars not appear.
<table class="someclass" width="60%"> <thead> <tr> <th class="header c0" style="text-align:left;">content: test 1</th> <th class="header c1">class statistics</th> </tr> </thead> <tbody> **<tr class="r0"> <td class="cell c0" style="text-align:left;">question: <br> <div class="no-overflow"> <div class="no-overflow"> <p><img src="image path" width="1365" height="767"></p> </div> </div> </td> <td class="cell c1" style=""> </td> </tr>** <tr class="r1"> <td class="cell c0" style="text-align:left;">answer:</td> <td class="cell c1" style=""> </td> </tr> <tr class="r0"> <td class="cell c0" style="text-align:left;"><input type="button" name="1" value="next"> next </td> <td class="cell c1" style=""></td> </tr> <tr class="r1 lastrow"> <td class="cell c0" style="text-align:left;"></td> <td class="cell c1" style=""> </td> </tr> </tbody> </table>
table image:
overflow:auto
on table-cell isn't going anything, unfortunately. table cells resize allow them fit contents. however, if add fixed width
, height
table cell, overflow works fine , scroll bars visible.
see this fiddle.
Comments
Post a Comment