如何使表响应

Question

我有一些桌子，我希望在宽度最大760时显示响应。

这个表看起来很正常：

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

在该表中，最后一个coloumn只显示在表的末尾而不是每行。

任何人都可以帮我这么做吗？

Answer 1

使用此html＆amp; make rsponsive table的css代码

检查下面的代码段。

• 将此css用于媒体查询最大宽度：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>

Answer 2

我写了js函数来使表响应。您可以将断点和表标记或CSS类名称设置为参数。

    const makeTableResponsive = (mq, t) => {
    var q = window.matchMedia(mq);
    if (q.matches) {
        let headings = [];
        let tables = document.querySelectorAll(t);
        if (tables && tables.length > 0) {
            tables.forEach(table => {
                let thead = table.querySelector("thead");
                let headingTags = thead.querySelectorAll("th");
                let tbody = table.querySelector("tbody");
                let tbodies = tbody.querySelectorAll("tr");
    
                tbody.style.display = "block";
                thead.style.display = "none";
    
                headingTags.forEach((th) => {
                    th.style.display = "block";
                    headings.push(th.innerText);
                });
    
                tbodies.forEach((tr) => {
                    let trstyle = tr.style;
                    trstyle.display = "block";
                    trstyle.border = "1px solid #ccc";
                    trstyle.marginBottom = "30px";
    
                    let tds = tr.querySelectorAll("td");
                    tds.forEach((td, i) => {
                        td.style.display = "flex";
                        td.style.flexDirection = "row-reverse";
                        td.style.justifyContent = "space-between";
                        td.innerHTML += `<span class="font-weight-bold text-primary">${headings[i]}</span>`;
                    });
                });
            })
        }
    }
};


makeTableResponsive('(max-width: 992px)', 'table');