html - 如何使表格响应

Question

我有一些表格，我想让它在显示宽度最大为 760 时响应。

这张表看起来很正常:

如果屏幕宽度最大为 760，我想这样做:

在该表中，最后一列只出现在表的末尾，而不是每一行。

谁能帮我做到这一点？

Answer 1

使用此 html 和 css 代码制作响应式表格

检查下面的代码段。

• 将此 css 与媒体查询一起使用 ma​​x-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) ": ";
    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>