Html 如何最好地隐藏移动视图的表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17837866/
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
How to best hide a table column for mobile view
提问by IEnumerable
I have a HTML table, in a mobile browser I need to hide some of its columns.
我有一个 HTML 表格，在移动浏览器中我需要隐藏它的一些列。
I want to hide 2 or 3 of these cols using @mediaqueries if possible.
the below code didn't work for me:
@media如果可能，我想使用查询隐藏其中的 2 或 3 个列。以下代码对我不起作用：
<table>
<tr>
<td></td>
<td class='collapsable'></td>
<td class='collapsable'></td>
<td></td>
</tr>
</table>
//hide cols here
td.collapsable {display:block; }
@media only screen and (min-width: 450px) {
//show cols here
td.collapsable {display:none; }
}
回答by Zubzob
Something like this?(try resizing the Result window/pane)
The HTML:
HTML：
<tr>
<td class="one">corpse</td>
<td>corpse</td>
<td>corpse</td>
</tr>
The CSS:
CSS：
table{
width: 50%;
}
td, th{
border: 1px solid orange;
}
@media only screen and (max-width: 900px) {
.one{
display: none;
}
}
回答by Ty the Web Guy
Keep your HTML and table markup clean by using nth-child to hide the column. Should work with every modern browser that supports media queries.
通过使用 nth-child 隐藏列来保持 HTML 和表格标记干净。应该适用于每个支持媒体查询的现代浏览器。
Here's a sample fiddle showing it in action. Resize the result pane to see it work.
这是一个示例小提琴，显示了它的实际效果。调整结果窗格的大小以查看它的工作情况。
https://jsfiddle.net/tycahill/xm0nwr7x
https://jsfiddle.net/tycahill/xm0nwr7x
The cleanHTML:
将干净的HTML：
<table>
<tr>
<td>Column 1a</td>
<td>Column 2a</td>
<td>Column 3a</td>
</tr>
<tr>
<td>Column 1b</td>
<td>Column 2b</td>
<td>Column 3b</td>
</tr>
</table>
The CSS to hide the second column:
隐藏第二列的 CSS：
@media only screen and (max-width: 800px) {
td:nth-child(2) {
display:none;
}
}
回答by Diodeus - James MacFarlane
Plan B: put a DIV in each cell. Class the DIVs by column. Hide the DIVs. You may need to adjust your table's cellpadding/cellspacing and put it on the .cellDIV to maintain the previous appearance.
计划 B：在每个单元格中放置一个 DIV。按列对 DIV 进行分类。隐藏 DIV。您可能需要调整表格的单元格填充/单元格间距并将其放在.cellDIV 上以保持以前的外观。
<table>
<tr>
<td><div class='cell'></div></td>
<td><div class='cell collapsable'></div></td>
<td><div class='cell collapsable'></div></td>
<td><div class='cell'></div></td>
</tr>
</table>
回答by user1171848
I think your example has the display:blockand display:noneswitched. Also, I would recommend using display: table-cell;instead of display: block;, since table-cell is the default display for <td>elements. This CSS worked for me, and also is a mobile-first approach:
我认为你的例子有display:block和display:none切换。另外，我建议使用display: table-cell;而不是display: block;，因为表格单元格是<td>元素的默认显示。这个 CSS 对我有用，也是一种移动优先的方法：
td.collapsable {display:none; }
@media only screen and (min-width: 450px) {
td.collapsable {display:table-cell; }
}
