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>  &nbsp;&nbsp;&nbsp;     <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>     &nbsp;&nbsp;&nbsp;     <asp:image id="image12" runat="server" imageurl="~/images/12.jpg" />     </td>     </tr>     </table>      <table style="width:500px;display:inline-block;">     <tr>     <td>      &nbsp;&nbsp;&nbsp;     <asp:image id="image13" runat="server" imageurl="~/images/13.jpg" />     </td>     </tr>     </table>      <table style="display:inline-block;">     <tr>     <td>      &nbsp;&nbsp;&nbsp;     <asp:image id="image14" runat="server" imageurl="~/images/14.jpg" />     </td>     </tr>     </table>      <table style="width:500px;display:inline-block;">     <tr>     <td>      &nbsp;&nbsp;&nbsp;     <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

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -