是否可以使 display:table-cell 布局响应式？

在我的代码中，有一个表，其中有一个分区，其中的表行由水平的复选框组成。这是我的示例代码，完整的代码在小提琴中Here

HTML:

<table cellpadding="0" border="0" width="100%" cellspacing="0">
    <tr>
        <td style="text-align:left" width="65px"><strong> Color: </strong>
        </td>
        <td style="float:left; text-align:left; width:100%">
            <div style="display:table; width:100%">
                <div style="width:100%;display:table-row">
                    <input type="checkbox" />
                    <label class="btn"> <span>A</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>B</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>C</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>D</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>E</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>F</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>G</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>H</span> 
                    </label>
                    <input type="checkbox" />
                    <label class="btn"> <span>I</span> 
                    </label>
                </div>
            </div>
    </tr>
</table>

CSS:

.btn {
    display: table - cell;
}

在电脑和平板电脑视图中，它看起来很完美，如我所愿，从左侧和右侧都合理，但在移动视图中，是否可以将其分成两行以使其具有响应能力？请看小提琴。

您可以使用媒体查询将 div 设置为display: block;. Demo

保留用于较大显示器的 CSS，然后使用媒体查询来定位较小的显示器。我建议将标签和复选框包装在一起，以防止它们分开：

HTML

<div class="table-cell">
    <input type="checkbox" class="checkbox" />
    <label class="btn"> <span>A</span> 
    </label>
</div>

CSS

.table {
    display: table;
    width: 100%;
}

.table-row {
    display: table-row;
    width: 100%;
}

.table-cell {
    display: table-cell;
}

@media screen and (max-width: 479px) {
    .table, .table-row {
        display: block;
    }
    .table-cell {
        display:inline-block;
    }
}

您可能需要根据自己的喜好更改标签的对齐方式。