Aligning Multiple Tables Horizontally using CSS or HTML for IE lower versions(6,7,8) -
my code works fine ie 10 , higher version, in chrome , firefox. users use either low version of ie. apart that, of code built lower version of ies. hence ie 10, have use compatibility mode. need align multiple tables side side. generating html tables using code. same table in control used multiple times in web page.
in ie10, chrome, firefox - display property set inline-block working fine. not getting detected in compatibility mode.
any suggestion help.
thanks
given below test code, content inside table changes. unable insert div rest of code. placing parenthesis around main div block
{div id="scroll3" style="overflow-x:scroll; overflow-y:scroll; height:300px; white-space:nowrap;"}
div style="width:auto;" table style="display:inline-block;"> <tr> <td> <asp:image id="image7" runat="server" imageurl="~/images/7.jpg" /> </td> </tr> </table> <table style=" width:500px; display:inline-block;"> <tr> <td> <asp:image id="image10" runat="server" imageurl="~/images/10.jpg" /> </td> </tr> </table> <table style="width:500px; display:inline-block;"> <tr> <td> <asp:image id="image8" runat="server" imageurl="~/images/8.jpg" /> </td> </tr> </table> <table style="width:500px;display:inline-block;"> <tr> <td> <asp:image id="image9" runat="server" imageurl="~/images/9.jpg" /> </td> </tr> </table> <table style="width:500px;display:inline-block;"> <tr> <td> <asp:image id="image11" runat="server" imageurl="~/images/11.jpg" /> </td> </tr> </table> <table style="width:500px;display:inline-block;"> <tr> <td > </td> </tr> </table> <table style="width:500px;display:inline-block;"> <tr> <td> <asp:image id="image12" runat="server" imageurl="~/images/12.jpg" /> </td> </tr> </table> <table style="width:500px;display:inline-block;"> <tr> <td> <asp:image id="image13" runat="server" imageurl="~/images/13.jpg" /> </td> </tr> </table> <table style="display:inline-block;"> <tr> <td> <asp:image id="image14" runat="server" imageurl="~/images/14.jpg" /> </td> </tr> </table> <table style="width:500px;display:inline-block;"> <tr> <td> <asp:image id="image15" runat="server" imageurl="~/images/15.jpg" /> </td> </tr> </table>
inline-block
not suitable display
property table.
use inline-table
instead... modern browsers.
for support older ones, however, may need use float:left
, or nested tables (ewwww, feel dirty suggesting that...) make work far ie6.
Comments
Post a Comment