Html 使用css隐藏响应表中的列
我有一个通用表,希望将此表用于多种用途。 例如1。 有关员工详细信息: Eno eFname ELName EDept ESalary Elocation。 在上面我想隐藏ELname和Elocation。目前我使用css类来隐藏ELName和ELocation 学生的详细情况 Sno SFname SLname SDegree SLocation。 我想在一些设备上隐藏一些列,比如在移动模式、肖像模式下。 目前我使用css类来隐藏特定的列,但该表对所有列都是通用的 我注意到,将.hidden phone和.hidden tablet之类的类添加到桌上的单元格中,会在视觉上破坏它们。这是因为单元格将尝试显示为块 你能帮我在.隐藏电话.隐藏肖像…等中需要使用什么属性吗。Html 使用css隐藏响应表中的列,html,css,responsive-design,Html,Css,Responsive Design,我有一个通用表,希望将此表用于多种用途。 例如1。 有关员工详细信息: Eno eFname ELName EDept ESalary Elocation。 在上面我想隐藏ELname和Elocation。目前我使用css类来隐藏ELName和ELocation 学生的详细情况 Sno SFname SLname SDegree SLocation。 我想在一些设备上隐藏一些列,比如在移动模式、肖像模式下。 目前我使用css类来隐藏特定的列,但该表对所有列都是通用的 我注意到,将.hidden
不想在媒体查询中使用tr td:nth child(4)和tr td:nth child(3)来隐藏列。在css中使用媒体查询,以下是css查询的4个断点 这是JSFIDLE HTML
您是否尝试过显示:无或可见:隐藏代码>或<代码>不透明度:0代码>?在css中使用@media查询。你能发布一个JSFIDLE吗?这是我的JSFIDLE,但是,只有表列是隐藏的。这是一个更新的fiddle,它修复了一些HTML和CSS错误,这些错误使它一开始无法工作。
<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>
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;
}
}