如何在小型设备中创建响应式表格？答案

【问题标题】：How to create a responsive table in small device?如何在小型设备中创建响应式表格？
【发布时间】：2020-06-30 21:11:25
【问题描述】：

我有一个简单的应用程序，它有一个包含四列的简单表格，我需要一个响应式表格，其中每一列都在另一列之下，但我不知道该怎么做。我希望不使用Javascript有一些答案。

现在我有一张这样的表：

+---------------+
| Some text     |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+

我需要以更小的分辨率得到这个结果：

 | A | B | C | D |

+---+---+-
| A | B |
+---+---+
| A | B |
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+

等等。有可能吗？这是我的JSfiddle。 jsfiddle中的答案也是最好的。

这里是 HTML

<table>
    <tbody>
        <tr>
            <td style="text-align: center; font-size: 14px;" colspan="4">Some title</td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>

            </td>
            <td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>

            </td>
            <td style="text-align: center; background-color: #d5d3d4;"><strong>&nbsp;<span style="color: #1e2a64;">Title3</span></strong>

            </td>
            <td style="text-align: center; background-color: #e0f0cb;"><strong>&nbsp;<span style="color: #5ca402;">Title4</span></strong>

            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">
                <div class="circle"><strong>&nbsp;1.500</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #e7e5e6;">
                <div class="circle"><strong>&nbsp;700</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #f0fae2;">
                <div class="circle-free">
                    <p class="hidden_paragraph">hidden</p>
                    <p style="padding-left: 10px;">0 <sup>eur</sup>

                    </p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
            <td style="text-align: center; background-color: #efedee;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
            <td style="text-align: center; background-color: #e7e5e6;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
            <td style="text-align: center; background-color: #f0fae2;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #efedee; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #e7e5e6; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #f0fae2; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>
    </tbody>
</table>

CSS

@media all and (max-width:768px){

  tr{
    display: inline;
    float:left;
}

td{
   display: block;
}
}

注意：没有引导程序

【问题讨论】：

示例：codepen.io/AllThingsSmitty/pen/MyqmdMe 或使用 css 网格，css-snippets.com/responsive-table-layout-with-css-grid
codepen 你提供的未找到，我不想只使用网格什么的 CSS
是的，css网格，只是css，不知道你的意思。对不起，链接是codepen.io/AllThingsSmitty/pen/MyqmdM
好的，我去看看

标签： html css

【解决方案1】：

由于我还不能发表评论，所以我会以这种方式回复。 CSS 网格是纯 CSS，也是迄今为止解决问题的最简单方法。

唯一的其他方法是引导程序，您排除了它，或者使用 flexbox 进行大量不必要的工作。

【讨论】：