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

Question

我很难适应屏幕尺寸为3列的桌子，无论它是什么。

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

但是，在移动设备上，如果你的宽度低于480px，它将会显示如下：

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

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

我也尝试了元视口提示，但仍然没有结果。

Answer 1

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

Responsive table by columns

Answer 2

确保您可以使用媒体查询来处理屏幕尺寸。

在较小尺寸上试试

1. 减少单元格的填充，因此您可以获得一些空间来处理
2. 设置max-with到单元格，使它们不会比你想要的更大，文本将分解到下一行

或者：

使表格单元格在较小的屏幕尺寸上从内联块切换到块。 这样他们就会堆叠在一起。

Answer 3

始终避免在响应式布局中使用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并调整窗口大小以查看输出