Clever Geek Handbook

Place tables side by side if there is enough screen space

I have two HTML tables that fit perfectly side by side on the screen. Widescreen monitors can handle this fine, but the tables are too wide to be next to each other on most old-fashioned monitors. So I want to use css (or even just HTML if possible) to place tables side by side only if the resolution is high enough.

This usually works with images, but is there a way to do it for tables?

0


source to share


3 answers


Yes, apply a CSS style float: left to the table elements



Here's an excellent swimming primer: http://css.maxdesign.com.au/floatutorial/

+11


source


My advice would be to float in the table (don't forget to specify the width of the table - choose the one on the non-screen monitor).

table {
    width: 500px; /* important */
    float: left;
}


However, this might work too (untested):

table {
    display: inline;
}
+3


source


try this (you can resize the window): 

<html>
<body bgcolor="red">
<p>
    <table bgcolor="green" style="float: right;">
    <tr>
        <td>sssssssssssssssssssssssssssssssssssssssssss</td>
    </tr>
    </table>

    <table bgcolor="blue" style="float: left;">
    <tr>
        <td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
    </tr>
    </table>
</p>
</body>
</html>

->

0


source






More articles:


All Articles