在 HTML/CSS 中制作响应式表格答案

【问题标题】：Making a table responsive in HTML/CSS在 HTML/CSS 中制作响应式表格
【发布时间】：2020-11-05 22:16:00
【问题描述】：

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

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

【问题讨论】：

这取决于您希望它如何重新调整。表格有自己的标签 - 、等，因此根据正在查看的设备/屏幕尺寸创建全新布局存在限制。您可以使用
来构造内容，并使用 css display:table;。或者，您可以使用 css 网格或 flexbox。这些中的任何一个都可能是选项，具体取决于您想要做什么
我通过 W3C 验证器运行了您的表格声明，它说对齐、单元格填充、单元格间距和边框已过时 - 改用 CSS。我认为这些属性不是真正的 HTML5。

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在我的例子中，我给了你一个自适应table的例子。自适应以 800 像素宽度触发。希望对你有所帮助。

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>

【讨论】：

【解决方案4】：

如果您的数据最适合在表格中显示，那么您就会知道您有多少列，并且会对它们之间的相对宽度有所了解。您还将决定您希望在非常窄的设备上发生什么 - 是否可以立即看到要全部压缩到整行的单元格，或者如果内容不合适，用户是否可以水平滚动单元格在可用的屏幕上好吗？为了解决这个问题，您可能需要为表格本身或其容器设置最小宽度。

确定后，您可以使用 CSS 相对于表格的整体宽度来设置每个单元格的样式。在最简单的情况下，您希望它们都具有相同的宽度，您可以给它们每个 x% 的容器宽度，其中 x*number of columns = 100。

否则，您可以酌情使用 CSS 选择器，例如 td:nth-child(1) {width: 10%;} td:nth-child(2) {width:15%;} 等等。

对于单元格高度也是如此 - 您可能希望根据行号而有所不同。

如此继续，但使用 CSS 而不是已弃用的特定于表格的属性，您有很大的灵活性，例如在哪些行和列获得什么填充或颜色或边框以及它们的基本尺寸。

如果您保留所有维度（除了最大和最小表格宽度），那么您可能不需要使用媒体查询。

【讨论】：