[英]CSS table display: inline-block
.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 我想使表全宽,直到屏幕可以包含多个表侧由端则表将被示出并排侧,但是当我写{显示:内联块}在表CSS,它变得像这
then what is the problem 那是什么问题
You can achieve that using div
and media query
like so. 您可以像这样使用
div
和media query
来实现。 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>
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. 您需要使用“ float:left”或“ float:right”属性来允许表或任何其他容器(在我的情况下为div)浮动到另一个容器的侧面。 That combined with a "display:inline" or "display:inline-block" is going to give you the results you expect.
结合“ display:inline”或“ display:inline-block”将为您提供预期的结果。
You can see it here: https://jsfiddle.net/7vxeakdw/3/ 您可以在这里看到它: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.