gpt4 book ai didi

html - 使用CSS隐藏响应表中的列

转载 作者:太空狗 更新时间:2023-10-29 14:56:00 25 4
gpt4 key购买 nike

我有一个通用表,想将此表用于多种用途。对于例 1。对于员工详细信息:Eno eFname ELName EDept ESalary 位置。在上面我想隐藏 ELname 和 Elocation。目前我使用 css 类来隐藏 ELName 和 ELocation。

示例 2:学生详细信息Sno SFname SLname SDegree SLocation。我想在某些设备上隐藏某些列,例如移动模式、纵向模式。目前我使用 css 类来隐藏特定的列。但该表对所有人都是通用的。

我注意到将 .hidden-phone 和 .hidden-tablet 等类添加到表格单元格会破坏它们的视觉效果。这是因为单元格会尝试显示为 block 。

你能帮我在 .hidden-phone、.hidden-portrait..etc 中需要使用哪些属性吗?不想在媒体查询中使用 tr td:nth-child(4),tr td:nth-child(3) 来隐藏列。

最佳答案

在您的 css 中使用媒体查询,这里是 4 个断点 css 查询。

这是 jsfiddle http://jsfiddle.net/yeyene/MfKzU/1/

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

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;
}
}

关于html - 使用CSS隐藏响应表中的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17020595/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com