表格不适合移动设备上的父容器大小答案

【问题标题】：Table doesn't fit parent container size on mobile表格不适合移动设备上的父容器大小
【发布时间】：2014-11-24 17:36:37
【问题描述】：

我很难让一个有 3 列的表格适应屏幕大小，不管它是什么。

On this example : 表格可以在任何 PC 屏幕上正确显示。

但是，在移动设备上，如果您低于 480 像素（宽度），则会显示如下：

您可以使用 Chrome 开发者工具中的移动视图查看相同的内容（我使用“Samsung Galaxy S/S II”预设）

如何使表格适合屏幕？我尝试在“样式”或表格标签（width="100%"）中添加“宽度：100%”，但没有任何反应。

我也尝试了 meta viewport 提示，但仍然没有结果。

【问题讨论】：

标签： android html css mobile tabular

【解决方案1】：

始终避免在响应式布局中使用 tables，而尝试使用 dl, dt, dd。试试下面的示例

HTML

<section class="table_specification">
    <dl>
        <dt>Heading 1</dt>
        <dd>Description 1</dd>
   </dl>
    <dl>
        <dt>Heading 2</dt>
        <dd>Description 2</dd>
   </dl>
        <dl>
        <dt>Heading 3</dt>
        <dd>Description 3</dd>
   </dl>
</section>

CSS

dl, dd, dt{
    margin:0;
}
.table_specification{
    display: table;
    width:100%;
    border-spacing:5px 5px;
}
.table_specification dl{    
      display:table-row;  
}
.table_specification dt, .table_specification dd{
    display: table-cell;
    width:50%;
    border:1px solid red;
}
@media only screen and (max-width:480px){
   .table_specification dd, .table_specification dt{
    display: block;
    width:100%;
    border:1px solid red;
} 
}

检查fiddle demo 并调整窗口大小以查看输出

【讨论】：

完美，根据大小和位置（纵向/横向），它确实适合屏幕。（但是，不要期望看到纵向的列，您会在横向看到更多的列。但是如果您正确构建“表格”，它将显示得非常好！）

【解决方案2】：

表格不利于响应。如果您需要表格，请尝试以下解决方案：

Responsive table by columns

【讨论】：

【解决方案3】：

确保您有可用于屏幕尺寸的媒体查询。

在较小的尺寸上试试这个

减少单元格的内边距，从而获得一些工作空间
为单元格设置一个 max-with，这样它们就不会变得比你想要的大，文本会换到下一行

或者：

使表格单元格在较小的屏幕尺寸上从 inline-block 切换到 Block。这样它们就可以相互叠加。

【讨论】：