0

Two requirements:

  1. Two tables centered side by side in the middle of the page.
  2. When page resized to be smaller than their combined widths, the right table moves below the left table.

I have tried putting both tables in a centered div container and again in a another table, but they do not change position when the page is resized. Thanks in advance for the help.

PS. This helps with requirement 1 and 1 only: Two HTML tables side by side, centered on the page

<div id="tables_container">
<table align="center"><tr><td>
    <table class="tables">
        <tr class="r1">
            <td>text</td>
            <td>text</td>
        </tr>
        <tr class="r2">
            <td>text</td>
            <td>text</td>
        </tr>
    </table>
</td><td>
    <table class="tables">
        <tr class="r2">
            <td>text</td>
            <td>text</td>
        </tr>
        <tr class="r1">
            <td>text</td>
            <td>text</td>
        </tr>
    </table>
</td></tr></table>

To answer my own question (it wouldn't let me answer below)... I think it was necessary to do 2 different formatting methods to obtain this goal. Thanks to @erikr98, I was able to do so:

HTML:

<div id="tables_container">
    <table class="tables">
        <tr class="r1">
            <td>text</td>
        </tr>
        <tr class="r2">
            <td>text</td>
        </tr>
    </table>
    <table class="tables">
        <tr class="r2">
            <td>text</td>
        </tr>
        <tr class="r1">
            <td>text</td>
        </tr>
    </table>
</div>

CSS:

@media (max-width: 1099px) { /*small*/
    #tables_container{
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    table{
            margin-right: auto;
            margin-left: auto;
    }
}

@media (min-width: 1100px) { /*big*/
    #tables_container{
        margin-left: auto;
        margin-right: auto;
        width: 1070px;
    }

    table{
            display: inline-block;
            margin-right: auto;
            margin-left: auto;
    }
}
Community
  • 1
  • 1
katestrykermcm
  • 45
  • 5

2 Answers2

1

try this

<style type="text/css">
table {
    width: X;
    margin: 0 auto;
    display: block;
}</style>

PauLo Torrealba
  • 82
  • 3
0

My suggestion is to use responsive CSS. You don't mention whether the widths of the tables are fixed or not. In the general CSS style, you'd set each of these tables with the display:inline CSS attribute. This makes them go side by side.

Then, at whatever resolution you need the tables to stack, set that in a media query. The format looks something like this: 

@media (max-width: 979px) {
    .mytable { display: block }
}

To get more information about inline vs. block, go here: display:inline vs display:block

For responsive design, try this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Community
  • 1
  • 1
erikr98
  • 76
  • 3