在HTML/CSS中使表格响应

Question

<table align="center" border="0" border-collapse:="" cellpadding="5" cellspacing="5" collapse="" style="height: auto; width: 1229px; max-width: 100%;">

我想知道如何让我的表格重新调整自己，这样当我调整浏览器窗口或移动设备上的表格大小时，表格就会相应地进行调整。

Answer 1

您想要使用的是媒体查询，它允许您根据屏幕/设备的大小选择内容在屏幕上的位置和方式。

看一看这些，以供进一步参考：

https://www.w3schools.com/css/css3_mediaqueries.asp

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

如果您的用例可行，可以考虑使用CSS网格作为创建响应表的一种方式

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Answer 3

在我的示例中，我给出了一个自适应table的示例。自适应射击的宽度为800px。希望能对你有所帮助。

​

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: hidden;
}

thead {
    background-color: #E5E5E5;
}

tr:nth-child(even) {
    background-color: #F2F2F2;
}

th, td {
    padding: 15px;
    text-align: center;
}

@media(max-width: 800px) {

        table
        {
          border: 0;
        }
        thead
        {
          display: none;
        }
        tr
        {
          display: block;
          margin: 0 0 20px 0;
        }
        td
        {
          display: block;
          text-align: right;
        }
        td:before
        {
          content: attr(aria-label);
          float: left;
          font-weight: bold;
        }
        td:last-child
        {
          border-bottom: 0;
        }
        
        tr:nth-child(odd){
          background-color: #F2F2F2;
        }

        tr:nth-child(even){
            background-color: #FFFFFF;
            border-width: 3px 0 3px 0;
            border-style: solid;
            border-color: #E5E5E5;
        }
}

<table>
                <thead>
                    <tr>
                        <th scope="col">filed 1</th>
                        <th scope="col">filed 2</th>
                        <th scope="col">filed 3</th>
                        <th scope="col">filed 4</th>
                        <th scope="col">filed 5</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td scope="row" aria-label="filed 1">simple text 1</td>
                        <td aria-label="filed 2">simple text 2</td>
                        <td aria-label="filed 3">simple text 3</td>
                        <td aria-label="filed 4">simple text 4</td>
                        <td aria-label="filed 5">simple text 5</td>
                    </tr>
                    <tr>
                        <td scope="row" aria-label="filed 1">simple text 1</td>
                        <td aria-label="filed 2">simple text 2</td>
                        <td aria-label="filed 3">simple text 3</td>
                        <td aria-label="filed 4">simple text 4</td>
                        <td aria-label="filed 5">simple text 5</td>
                    </tr>
                    <tr>
                        <td scope="row" aria-label="filed 1">simple text 1</td>
                        <td aria-label="filed 2">simple text 2</td>
                        <td aria-label="filed 3">simple text 3</td>
                        <td aria-label="filed 4">simple text 4</td>
                        <td aria-label="filed 5">simple text 5</td>
                    </tr>
                    <tr>
                        <td scope="row" aria-label="filed 1">simple text 1</td>
                        <td aria-label="filed 2">simple text 2</td>
                        <td aria-label="filed 3">simple text 3</td>
                        <td aria-label="filed 4">simple text 4</td>
                        <td aria-label="filed 5">simple text 5</td>
                    </tr>
                    <tr>
                        <td scope="row" aria-label="filed 1">simple text 1</td>
                        <td aria-label="filed 2">simple text 2</td>
                        <td aria-label="filed 3">simple text 3</td>
                        <td aria-label="filed 4">simple text 4</td>
                        <td aria-label="filed 5">simple text 5</td>
                    </tr>
                </tbody>
</table>

​