Several tables side by side

Asked

Viewed 1,939 times

1

Good night!

I am learning html + css, and would like to make my 3 tables, stand side by side on the horizontal even if it exceeds the right screen limit(enable scroll bar)

It is possible to do?

Follows code below:

<div id="div1">
    <table id="table1" >
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br/>10</th>
            <th>Sa
                <br/>11</th>
            <th>Su
                <br/>12</th>
            <th>Mo
                <br/>13</th>
            <th>Tu
                <br/>14</th>
            <th>We
                <br/>15</th>
            <th>Th
                <br/>16</th>
            <th>Fr
                <br/>17</th>
            <th>Sa
                <br/>18</th>
            <th>Su
                <br/>19</th>
            <th>Mo
                <br/>20</th>
            <th>Tu
                <br/>21</th>
            <th>We
                <br/>22</th>
            <th>Th
                <br/>23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
	<table id="table1" >
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br/>10</th>
            <th>Sa
                <br/>11</th>
            <th>Su
                <br/>12</th>
            <th>Mo
                <br/>13</th>
            <th>Tu
                <br/>14</th>
            <th>We
                <br/>15</th>
            <th>Th
                <br/>16</th>
            <th>Fr
                <br/>17</th>
            <th>Sa
                <br/>18</th>
            <th>Su
                <br/>19</th>
            <th>Mo
                <br/>20</th>
            <th>Tu
                <br/>21</th>
            <th>We
                <br/>22</th>
            <th>Th
                <br/>23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
	<table id="table1" >
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br/>10</th>
            <th>Sa
                <br/>11</th>
            <th>Su
                <br/>12</th>
            <th>Mo
                <br/>13</th>
            <th>Tu
                <br/>14</th>
            <th>We
                <br/>15</th>
            <th>Th
                <br/>16</th>
            <th>Fr
                <br/>17</th>
            <th>Sa
                <br/>18</th>
            <th>Su
                <br/>19</th>
            <th>Mo
                <br/>20</th>
            <th>Tu
                <br/>21</th>
            <th>We
                <br/>22</th>
            <th>Th
                <br/>23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>	
</div>

html css

2 answers

2

In the case of the table the situation is a little different because should not touch the display table, what I mean is that the tag <table> by default has display:table and you should not change it in any way! Then the solution I point out is to change the display of div#div1 that you’re using as container to put the 3 tables inside.

In that div#div1 place display:flex, with this the 3 tables will be next to each other.

#div1 {
    display: flex;
}
table {
    border: 1px solid #000;
}
<div id="div1">
    <table id="table1">
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br />10</th>
            <th>Sa
                <br />11</th>
            <th>Su
                <br />12</th>
            <th>Mo
                <br />13</th>
            <th>Tu
                <br />14</th>
            <th>We
                <br />15</th>
            <th>Th
                <br />16</th>
            <th>Fr
                <br />17</th>
            <th>Sa
                <br />18</th>
            <th>Su
                <br />19</th>
            <th>Mo
                <br />20</th>
            <th>Tu
                <br />21</th>
            <th>We
                <br />22</th>
            <th>Th
                <br />23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table id="table1">
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br />10</th>
            <th>Sa
                <br />11</th>
            <th>Su
                <br />12</th>
            <th>Mo
                <br />13</th>
            <th>Tu
                <br />14</th>
            <th>We
                <br />15</th>
            <th>Th
                <br />16</th>
            <th>Fr
                <br />17</th>
            <th>Sa
                <br />18</th>
            <th>Su
                <br />19</th>
            <th>Mo
                <br />20</th>
            <th>Tu
                <br />21</th>
            <th>We
                <br />22</th>
            <th>Th
                <br />23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table id="table1">
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br />10</th>
            <th>Sa
                <br />11</th>
            <th>Su
                <br />12</th>
            <th>Mo
                <br />13</th>
            <th>Tu
                <br />14</th>
            <th>We
                <br />15</th>
            <th>Th
                <br />16</th>
            <th>Fr
                <br />17</th>
            <th>Sa
                <br />18</th>
            <th>Su
                <br />19</th>
            <th>Mo
                <br />20</th>
            <th>Tu
                <br />21</th>
            <th>We
                <br />22</th>
            <th>Th
                <br />23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

1


In addition to adding the flex display in div that you are using as container you need to add the property flex-Shrink as 0 in the table, so that it is not limited to the window size.

#div1 {
    display: flex;
}
table {
    border: 1px solid #000;
    flex-shrink:0;
}
<div id="div1">
    <table id="table1">
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br />10</th>
            <th>Sa
                <br />11</th>
            <th>Su
                <br />12</th>
            <th>Mo
                <br />13</th>
            <th>Tu
                <br />14</th>
            <th>We
                <br />15</th>
            <th>Th
                <br />16</th>
            <th>Fr
                <br />17</th>
            <th>Sa
                <br />18</th>
            <th>Su
                <br />19</th>
            <th>Mo
                <br />20</th>
            <th>Tu
                <br />21</th>
            <th>We
                <br />22</th>
            <th>Th
                <br />23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table id="table1">
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br />10</th>
            <th>Sa
                <br />11</th>
            <th>Su
                <br />12</th>
            <th>Mo
                <br />13</th>
            <th>Tu
                <br />14</th>
            <th>We
                <br />15</th>
            <th>Th
                <br />16</th>
            <th>Fr
                <br />17</th>
            <th>Sa
                <br />18</th>
            <th>Su
                <br />19</th>
            <th>Mo
                <br />20</th>
            <th>Tu
                <br />21</th>
            <th>We
                <br />22</th>
            <th>Th
                <br />23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table id="table1">
        <tr>
            <th class="class1">Name</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Fr
                <br />10</th>
            <th>Sa
                <br />11</th>
            <th>Su
                <br />12</th>
            <th>Mo
                <br />13</th>
            <th>Tu
                <br />14</th>
            <th>We
                <br />15</th>
            <th>Th
                <br />16</th>
            <th>Fr
                <br />17</th>
            <th>Sa
                <br />18</th>
            <th>Su
                <br />19</th>
            <th>Mo
                <br />20</th>
            <th>Tu
                <br />21</th>
            <th>We
                <br />22</th>
            <th>Th
                <br />23</th>
        </tr>
        <tr>
            <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
            <td>Click here</td>
            <td>$100 - $300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.