Html 是否可以使 display:table-cell 布局响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20773929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to make display:table-cell layout responsive?
提问by 8bitrebellion
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:
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:
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.
在 pc 和平板电脑视图中，它看起来很完美，从左侧和右侧都有理由，但在移动视图中是否可以将其分成两行以使其具有响应性？请看小提琴。
回答by brouxhaha
You can use a media-query to set the divs as display: block;. Demo
您可以使用媒体查询将 div 设置为display: block;. 演示
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:
保留用于较大显示器的 css，然后使用媒体查询来定位较小的显示器。我建议将标签和复选框包装在一起，以防止它们分开：
HTML
HTML
<div class="table-cell">
<input type="checkbox" class="checkbox" />
<label class="btn"> <span>A</span>
</label>
</div>
CSS
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.
您可能需要根据自己的喜好更改标签的对齐方式。
回答by Adrian P.
Here is what you want:
这是你想要的：
HTML
HTML
<table class="table" cellpadding="0" border="0" width="100%" cellspacing="0">
<thead>
<tr>
<th style="text-align:left" colspan="9"><strong> Color: </strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
<label class="btn"> <span>A</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>B</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>C</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>D</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>E</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>F</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>G</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>H</span>
</label>
</td>
<td>
<input type="checkbox" />
<label class="btn"> <span>I</span>
</label>
</td>
</tr>
</tbody>
</table>
CSS
CSS
.table {
width: 100%;
}
.table caption {
font-size: 15px;
font-weight: 700;
text-align: left;
margin-bottom: 20px;
color: #333;
text-transform: uppercase;
}
.table thead {
background-color: #444;
}
.table thead tr th {
padding: 10px;
font-weight: 700;
color: #f2f2f2;
text-transform: uppercase;
}
.table thead tr th:first-child {
text-align: left;
}
.table tbody {
background-color: #fcfcfc;
}
.table tbody tr td {
padding: 10px;
text-align: left;
}
.table tbody tr td:first-child {
text-align: left;
color: #333;
font-weight: 700;
}
.table tbody tr:nth-of-type(odd) {
background: #eee;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
.table tbody {
border: 0;
}
.table tbody tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
.table tbody td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
.table tbody td:last-child {
border-bottom: 0;
}
.table tbody td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
As you can see there is a media query for phones and tablets min-width 320 to max width 767
如您所见，有一个针对手机和平板电脑的媒体查询，最小宽度 320 到最大宽度 767
Basically, turn the table from desktop viewing
基本上，从桌面查看翻转桌子
to phone/tablet viewing
到手机/平板电脑查看
JSFiddle: http://jsfiddle.net/loginet/nctzk4f3/3/
JSFiddle：http: //jsfiddle.net/loginet/nctzk4f3/3/
Resource: https://css-tricks.com/accessible-simple-responsive-tables/?utm_source=dlvr.it&utm_medium=facebook
资源：https: //css-tricks.com/accessible-simple-responsive-tables/?utm_source=dlvr.it&utm_medium=facebook
