是否可以使 display:table-cell 布局响应? [英] Is it possible to make display:table-cell layout responsive?

问题描述

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

HTML:

<tr><td style="text-align:left" width="65px"><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><input type="checkbox"/><label class="btn"><span>B</span><input type="checkbox"/><label class="btn"><span>C</span><input type="checkbox"/><label class="btn"><span>D</span><input type="checkbox"/><label class="btn"><span>E</span><input type="checkbox"/><label class="btn"><span>F</span><input type="checkbox"/><label class="btn"><span>G</span><input type="checkbox"/><label class="btn"><span>H</span><input type="checkbox"/><label class="btn"><span>I</span>
</tr>

CSS:

.btn {显示:表格 - 单元格；}

在 PC 和平板电脑视图中，它看起来很完美，从左侧和右侧都有理由，但在移动视图中是否可以将其分成两行以使其具有响应性?请看小提琴.

解决方案

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

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

HTML

<input type="checkbox" class="checkbox"/><label class="btn"><span>A</span>

CSS

.table {显示:表；宽度:100%；}.table-row {显示:表格行；宽度:100%；}.table-cell {显示:表格单元格；}@media 屏幕和(最大宽度:479px){.table, .table-row {显示:块；}.table-cell {显示:内联块；}}

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

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.

解决方案

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

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.

这篇关于是否可以使 display:table-cell 布局响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！