是否可以进行显示：表格单元格布局是否响应？ [英] Is it possible to make display:table-cell layout responsive?

问题描述

在我的代码中有一个表格，其中我有分区，其中表格行包含水平复选框。这是我的示例代码，完整的代码是小提琴这里

In my code there is a table in which I have divisions which has table row consisting checkboxes horizontally. Here is my sample code, full code is in fiddle 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;
}

在个人电脑和平板电脑视图中，它看起来很完美，因为我想要的，两个都是合理的和右侧，但在移动视图中是否可以将其分为两行以使其响应？请看小提琴。

In pc and tablet view it looks perfect as i want, justified from both left and right side, but in mobile view is it possible to break it into two lines for making it responsive? Please look at fiddle.

推荐答案

您可以使用媒体查询将div设置为显示：块; 。 演示

You can use a media-query to set the divs as display: block;. Demo

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

Leave the css you have for the larger displays, then use the media-query to target the smaller ones. I would recommend wrapping the label and checkbox together also to keep them from breaking apart:

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;
    }
}

您可能需要将标签的对齐方式更改为你的喜好。

You may need to change the alignment of the labels to your liking.

这篇关于是否可以进行显示：表格单元格布局是否响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！