Question

我目前在使我的HTML表具有响应能力方面遇到问题。

我有一个html表，其中有4列，每列的宽度为25％。在桌面上，桌子看起来很棒。

第一列有10行，每行中都有一个描述文字。接下来的3列是产品列，其中每个列都有一个包含有关此产品的信息的产品。

由于我无法在手机上显示太多列，因此我希望基本上只在手机上显示第一列（说明）+产品列。因为否则，人们将不知道产品栏中的信息代表什么。

我希望有人能帮助我，谢谢！

我已经用CSS组成了表格，并尝试将手机上的每一列设置为50％。但是问题在于第一栏应该出现在每个产品栏的旁边。

这是我已经拥有的：

  <table>
    <thead>
    <tr>
    <th class="col-25">Preview</th>
    <th class="col-25">Product 1</th>
    <th class="col-25">Product 2</th>
    <th class="col-25">Product 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th class="col-25">Description</th>
    <td class="col-25">Product name 1</td>
    <td class="col-25">Product name 2</td>
    <td class="col-25">Product name 3</td>
    </tr>
 <tr>
    <th class="col-25">Price</th>
    <td class="col-25">Product price 1</td>
    <td class="col-25">Product price 2</td>
    <td class="col-25">Product price 3</td>
    </tr>
</tbody>
</table>

CSS：

.table {
    width: 100%;
    border-collapse:collapse;
    table-layout: fixed;
}
.col-25 {
    width: 25%;
}

Answer 1

好的，这有点棘手，但是我有一些解决您的问题的方法。

尝试使用CSS断点

如果您的设备达到特定宽度，则会隐藏以下列。

https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
使用Bootstrap

Bootstrap已经内置了断点。您可以使用其出色的网格系统来构建表格。

https://getbootstrap.com/docs/4.3/getting-started/introduction/

https://getbootstrap.com/docs/4.1/layout/grid/

如果您要发表您的示例，我可以进一步看一下，但是我认为这两个技巧应该使您了解如何自己解决此问题。

（对不起，我的英语不好）

使用HTML表格进行自适应设计，使第一列出现

1 个答案: