如何使表响应 [英] 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屋！