如何使 table 响应

Question

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

这是table看起来很正常:

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

因为 table 最后一列只是出现在 table 的末尾，而不是每一行。

任何人都可以帮助我做到这一点？

Answer 1

使用此 html 和 css 代码进行响应 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) ": ";
    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 函数来使 table 响应。您可以设置断点和 table 标记或 css class 名称作为参数。

    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');

如何使 table 响应

How to make table responsive

html

css

html-table

responsive