CSS表顯示：內聯塊

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> 

我想使表全寬，直到屏幕可以包含多個表側由端則表將被示出並排側，但是當我寫{顯示：內聯塊}在表CSS，它變得像這

那是什么問題

Answer 1

您可以像這樣使用div和media query來實現。 在整頁上查看效果。

 .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

您需要使用“ float：left”或“ float：right”屬性來允許表或任何其他容器（在我的情況下為div）浮動到另一個容器的側面。 結合“ display：inline”或“ display：inline-block”將為您提供預期的結果。

您可以在這里看到它： 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>