Html 使用css隐藏响应表中的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17020595/
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
Hide Columns in responsive table using css
提问by user2333363
I have a generic table and Want to use this table for multi purpose. For Eg 1. For Employee details: Eno eFname ELName EDept ESalary Elocation. In the above i want to hide ELname and Elocation. Currently i used css class to hide the ELName and ELocation.
我有一个通用表，想将此表用于多种用途。对于例如 1. 对于员工详细信息：Eno eFname ELName EDept ESalary Elocation。在上面我想隐藏 ELname 和 Elocation。目前我使用 css 类来隐藏 ELName 和 ELocation。
Eg 2: Student Details Sno SFname SLname SDegree SLocation. I want to hide some columns on some devices like in mobile mode, portrait mode. Currently i used css class to hide the particular column.But the table is generic for all.
例如 2：学生详细信息 Sno SFname SLname SDegree SLocation。我想在某些设备上隐藏一些列，例如移动模式、纵向模式。目前我使用 css 类来隐藏特定的列。但是该表对所有人来说都是通用的。
I noticed that adding classes like .hidden-phone and .hidden-tablet to table cells would brdeak them visually. This is because the cells would try to display as blocks.
我注意到将 .hidden-phone 和 .hidden-tablet 之类的类添加到表格单元格会在视觉上破坏它们。这是因为单元格会尝试显示为块。
Can you help me what properties i need to use in .hidden-phone,.hidden-portrait..etc. Don't want to hide the columns by using tr td:nth-child(4),tr td:nth-child(3) in media queries.
你能帮我在 .hidden-phone、.hidden-portrait.. 等中使用哪些属性吗？不想在媒体查询中使用 tr td:nth-child(4),tr td:nth-child(3) 来隐藏列。
回答by yeyene
Use media queries in your css, here is the 4 breakpoints css queries.
在你的 css 中使用媒体查询，这里是 4 个断点 css 查询。
Here is the jsfiddle http://jsfiddle.net/yeyene/MfKzU/1/
这是 jsfiddle http://jsfiddle.net/yeyene/MfKzU/1/
HTML
HTML
<table id="myTable" width="100%" border="1">
<tr>
<td>Nothing change</th>
<td class="col_1">Hide data < 959px</td>
<td class="col_2">Hide data < 767px</td>
<td class="col_3">Hide data < 599px</td>
<td class="col_4">Hide data < 479px</td>
</tr>
<tr>
<td>Left alone</td>
<td class="col_1">aaa</td>
<td class="col_2">bbb</td>
<td class="col_3">ccc</td>
<td class="col_4">ddd</td>
</tr>
<tr>
<td>Left alone</td>
<td class="col_1">aaa</td>
<td class="col_2">bbb</td>
<td class="col_3">ccc</td>
<td class="col_4">ddd</td>
</tr>
</table>
CSS
CSS
html, body{
margin:0;
padding:0;
}
#myTable {
float:left;
border:1px solid #dfdfdf;
border-collapse:collapse;
width:100%;
font-size:12px;
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media all and (min-width: 768px) and (max-width: 959px) {
td.col_1{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 600px */
@media all and (min-width: 600px) and (max-width: 767px) {
td.col_2{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media all and (min-width: 480px) and (max-width: 599px) {
td.col_3{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media all and (max-width: 479px) {
td.col_4{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
