Putting tables side-by-side if there is enough room on the screen

StackOverflow https://stackoverflow.com/questions/402817

  •  03-07-2019
  •  | 
  •  

Question

I have two HTML tables which would ideally be placed side by side on the screen. Widescreen monitors will cope with this fine, but the tables are too wide to be side by side on most old-fashioned monitors. So I want to use css (or even just HTML, if possible) to place the tables side by side only if the resolution is high enough.

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

Was it helpful?

Solution

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

Here is an excellent primer on floating: http://css.maxdesign.com.au/floatutorial/

OTHER TIPS

My advice would be to float the table (remember to specify a table width - choose one that's full on a non-widescreen monitor).

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

However this might work too (untested):

table {
    display: inline;
}

try this (you can change the size of 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>

-->

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top