CSS table display: inline-block

Question

 .custom-table { width: 100%; border: 5px solid black; text-align: center; border-collapse: collapse; max-width: 300px; } .right-column { width: 20%; border: 3px solid lightblue; } .middle-column { width: 40%; border: 3px solid lightblue; } .left-column { width: 40%; border: 3px solid lightblue; } 

 <table class="custom-table" dir="rtl"> <tr class="custom-row"> <td class="custom-column right-column"> 777 </td> <td class="custom-column middle-column"> 888 </td> <td class="custom-column left-column"> 999 </td> </tr> </table> <table class="custom-table" dir="rtl"> <tr class="custom-row"> <td class="custom-column right-column"> 777 </td> <td class="custom-column middle-column"> 888 </td> <td class="custom-column left-column"> 999 </td> </tr> </table> 

I want to make tables full width until the screen can contain multiple tables side-by-side then the tables will be shown side-by-side but when I write {display:inline-block} in table CSS, it becomes like this

then what is the problem

Answer 1

You can achieve that using div and media query like so. Check out the effect on full page.

 .custom-table{width: 100%; border: 5px solid black;text-align: center; border-collapse: collapse;max-width: 300px;} .right-column{width: 20%; border: 3px solid lightblue;} .middle-column{width: 40%; border: 3px solid lightblue;} .left-column{width: 40%; border: 3px solid lightblue;} .table1-box, .table2-box{ width: 50%; float: left; } @media (max-width:800px){ .table1-box, .table2-box{ width: 100%; margin-bottom:30px; } } 

 <div class="table1-box"> <table class="custom-table" dir="rtl"> <tr class="custom-row"> <td class="custom-column right-column"> 777 </td> <td class="custom-column middle-column"> 888 </td> <td class="custom-column left-column"> 999 </td> </tr> </table> </div> <div class="table2-box"> <table class="custom-table" dir="rtl"> <tr class="custom-row"> <td class="custom-column right-column"> 777 </td> <td class="custom-column middle-column"> 888 </td> <td class="custom-column left-column"> 999 </td> </tr> </table> </div> 

Answer 2

You need to use the "float:left" or "float:right" property to allow the table or any other container (a div in my case) to float to the side of the other container. That combined with a "display:inline" or "display:inline-block" is going to give you the results you expect.

You can see it here: https://jsfiddle.net/7vxeakdw/3/

 .custom-table{width: 100%; border: 5px solid black;text-align: center; border-collapse: collapse;max-width: 400px;display:inline;} .right-column{width: 20%; border: 3px solid lightblue;} .middle-column{width: 40%; border: 3px solid lightblue;} .left-column{width: 40%; border: 3px solid lightblue;} .container{display:inline-block;} .floatright{float:right;} 

 <div class="container"> <table class="custom-table" dir="rtl"> <tr class="custom-row"> <td class="custom-column right-column"> 777 </td> <td class="custom-column middle-column"> 888 </td> <td class="custom-column left-column"> 999 </td> </tr> </table> </div> <div class="container floatright"> <table class="custom-table" dir="rtl"> <tr class="custom-row"> <td class="custom-column right-column"> 777 </td> <td class="custom-column middle-column"> 888 </td> <td class="custom-column left-column"> 999 </td> </tr> </table> </div>