如何使表响应 [英] How to make table responsive
本文介绍了如何使表响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是表格看起来很正常:
如果屏幕宽度为max 760:
在该表中最后一列
任何人都可以帮我完成这项工作。
方案
使用此html& cb code for make rsponsive table
检查下面的代码段。
- 使用此CSS与媒体查询 max-width:760px或任何宽度
.responsive-table {margin:0px auto; width:500px; border:1px solid #efebeb; } .responsive-table img {height:100px; } .responsive-table th {display:none; } .responsive-table td {display:block; border-top:1px solid #ddd; } .responsive-table td:first-child {border:none;} .responsive-table td:first-child {padding-top:.5em; } .responsive-table td:last-child {padding-bottom:.5em; } .responsive-table td:before {content:attr(data-th):;显示:block; font-weight:bold; }
< table class =responsive-table> ; < tbody> < tr> < th>房间< / th> < th>访客< / th> < th>说明< / th> < th>费率< / th> < th>书< / th> < / tr> < tr> < td data-th =Room> < img src =http://i45.tinypic.com/t9ffkm.jpgalt =/> < / td> < td data-th =Guest> 2位成人< / td> < td data-th =Description>仅限会议室< / td> < td data-th =Rate> USD 200< / td> < td data-th =Book> < button type =submit> Book< / button> < / td> < / tr> < / tbody>< / table>
I have some table and I want to make it responsive when it show in width max 760.
This is the table looks normal :
And I want to make it like this if width of the screen is max 760 :
In that table the last coloumn just appears in end of table not in each row.
Anyone can help me to do that ?
解决方案
Use this html & css code for make rsponsive table
Check the Snippets is below .
- Use this css with media query max-width:760px or any width
.responsive-table {
margin:0px auto;
width:500px;
border: 1px solid #efebeb;
}
.responsive-table img{height:100px; }
.responsive-table th {
display: none;
}
.responsive-table td {
display: block;
border-top: 1px solid #ddd;
}
.responsive-table td:first-child{border:none;}
.responsive-table td:first-child {
padding-top: .5em;
}
.responsive-table td:last-child {
padding-bottom: .5em;
}
.responsive-table td:before {
content: attr(data-th) ": ";
display:block;
font-weight:bold;
}
<table class="responsive-table">
<tbody>
<tr>
<th>
Room
</th>
<th>
Guest
</th>
<th>
Description
</th>
<th>
Rate
</th>
<th>
Book
</th>
</tr>
<tr>
<td data-th="Room">
<img src="http://i45.tinypic.com/t9ffkm.jpg" alt="" />
</td>
<td data-th="Guest">
2 adult
</td>
<td data-th="Description">
Room Only
</td>
<td data-th="Rate">
USD 200
</td>
<td data-th="Book">
<button type="submit"> Book</button>
</td>
</tr>
</tbody>
</table>
这篇关于如何使表响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文